Back to No-Code Website Builders

Integrate AI chatbots with Shopstory

Visual content builder within your CMS; integrates custom HTML via SDK for seamless front-end rendering.

Overview

Shopstory is a visual, no-code page builder that empowers non-technical users to create and manage website content without needing developers. It integrates with modern CMS platforms like Contentful and Sanity, allowing users to add visual content fields to existing content models.

Unique Features:

  • Custom Components: Users can register and utilize custom React components within the visual editor.
  • Design Constraints: Maintains design system integrity by limiting options to predefined tokens (fonts, colors, etc.).
  • Performance Optimized: Built for fast rendering and compatibility with static site generation frameworks like Next.js and Gatsby.
  • User-Friendly: Allows marketers and designers to build content blocks (like hero banners and product grids) easily, streamlining the content creation process.

Add Custom HTML Documentation

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.

Integration Guide

For more information on how to add custom HTML to your Shopstory website, please refer to the Custom HTML Documentation.

How to integrate OpenAssistantGPT with Shopstory

  1. Create your OpenAssistantGPT chatbot

    Sign in to your OpenAssistantGPT dashboard and create a new chatbot or select an existing one.

  2. Configure your chatbot settings

    Customize your chatbot's appearance, behavior, and knowledge base to match your website's needs.

  3. Get your embed code

    In your OpenAssistantGPT dashboard, go to the "Deployment" section and copy your unique embed code.

  4. Add the embed code to your Shopstory website

    Log in to your Shopstory account, open your website editor, and add an HTML or Custom Code element to your site. Paste the OpenAssistantGPT embed code into this element.

  5. Publish your website

    Save your changes and publish your website to make the chatbot live.

Advanced Configuration

For more advanced integrations with Shopstory, you can customize the following:

  • Chatbot position and appearance on your website
  • Trigger conditions (e.g., time on page, scroll depth)
  • Custom welcome messages based on the page content
  • Integration with your existing forms and contact systems

Builder Details

No-code Solution

✅ No coding required

Custom HTML Support

✅ Supports custom HTML