Back to No-Code Website Builders

Integrate AI chatbots with ContentBox.js

ContentBox.js enables no-code web design with AI assistance; supports custom HTML integration for personalized sites.

Overview

InnovaStudio's ContentBox.js is a JavaScript library for web page design that simplifies the process of creating responsive websites. Key features include:

  • AI Assistant: Users can build web pages by typing or speaking commands.
  • Canvas Mode: A new interface for intuitive design.
  • Site Builder Kit: A step-by-step guide to set up a server for creating custom online web building services, allowing user signups and custom domains.

This tool is designed to empower users with limited technical skills to create and manage their own websites effectively.

Add Custom HTML Documentation

Step-by-Step Guide to Integrate Custom HTML into InnovaStudio ContentBuilder.js

  1. Set Up ContentBuilder.js: Ensure you have ContentBuilder.js integrated into your project. You can include it via a script tag or import it as an ES6 module.

  2. Define Custom Blocks: Create a custom block by defining it in an editable JSON file. This file should specify the block's properties, including its HTML content and any associated styles.

  3. Use the Editor: Open the ContentBuilder.js editor. You can drag and drop your custom block into the desired location on your page.

  4. Insert Custom HTML: In the block settings, you can directly input your custom HTML code. This allows for flexibility in design and functionality.

  5. Save Changes: After making your changes, ensure you save the content. You can retrieve the final HTML output using the builder.html() method.

  6. Test Your Integration: Preview your changes to ensure that the custom HTML is rendering correctly and functions as intended.

  7. Deploy: Once satisfied with the integration, deploy your changes to your live environment.

Integration Guide

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

How to integrate OpenAssistantGPT with ContentBox.js

  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 ContentBox.js website

    Log in to your ContentBox.js 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 ContentBox.js, 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