Integrate AI Chatbot with Shopstory

Overview

Shopstory is a no-code website builder that allows you to create professional websites without coding knowledge.

Visit Shopstory Website

How to Integrate OpenAssistantGPT with Shopstory

OpenAssistantGPT provides a seamless integration with Shopstory, allowing you to add an intelligent AI chatbot to your website without any coding. Here's how you can enhance your Shopstory website with our AI solution:

1. Sign up for OpenAssistantGPT: Create a free account at OpenAssistantGPT.
2. Create your AI chatbot: Customize your chatbot's appearance, behavior, and knowledge base.
3. Get your embed code: Once your chatbot is configured, get the embed code from your dashboard.
4. Add to your Shopstory website: Use the custom HTML integration feature in Shopstory to add the chatbot to your site.

Adding Custom HTML to Shopstory

Step-by-Step Guide to Integrate Custom HTML in Shopstory

1. Create a Shopstory Client: Initialize a ShopstoryClient instance using your Shopstory configuration and context parameters (like locale).

   const shopstoryClient = new ShopstoryClient(shopstoryConfig, { locale });

2. Fetch Content from CMS: Use a function to fetch the raw content from your CMS. This content is not yet optimized for rendering.

   const rawContent = await fetchShopstoryContentJSONFromCMS(entryId, locale);

3. Add Content to Client: Add the fetched raw content to the Shopstory client.

   const renderableContent = shopstoryClient.add(rawContent);

4. Build the Content: Call the build method on the client to prepare the content for rendering.

   const meta = await shopstoryClient.build();

5. Render the Content: Use the Shopstory component to render the content in your application, ensuring it is wrapped with ShopstoryMetadataProvider.

   <ShopstoryMetadataProvider meta={meta}>
       <Shopstory content={renderableContent} />
   </ShopstoryMetadataProvider>

6. Configure Server-Side Rendering (SSR): Update your _document.ts file to include the Shopstory styles for proper rendering.

   import { shopstoryGetStyleTag } from '@shopstory/core/react';

By following these steps, you can effectively integrate custom HTML components into your Shopstory setup.

Benefits of Adding AI Assistant to Your Shopstory Website

• 24/7 Customer Support: Provide instant answers to customer questions at any time.
• Lead Generation: Capture visitor information and qualify leads automatically.
• Reduced Workload: Automate repetitive tasks and inquiries.
• Enhanced User Experience: Offer interactive and personalized assistance to your visitors.
• Valuable Insights: Gain insights into customer needs and frequently asked questions.

Resources

• Shopstory Website
• OpenAssistantGPT Documentation
• AI Integration Guides

Get Started Today

Ready to transform your Shopstory website with AI? Sign up for free and start building your custom AI chatbot in minutes.

Ready to Add AI to Your Shopstory Website?

Start enhancing your website with intelligent AI assistance today. No credit card required.

Get Started For Free →