Integrate AI chatbots with GridlessBuilder.js

Step-by-Step Guide to Integrate Custom HTML into GridlessBuilder.js

1. Include Required JavaScript: Add the GridlessBuilder.js script to your HTML file.

   <script src="path/gridlessbuilder.min.js"></script>
   

2. Include Required Stylesheets: Add the necessary CSS files for GridlessBuilder.js.

   <link href="path/gridless.css" rel="stylesheet" type="text/css" />
   <link href="path/gridlessbuilder.css" rel="stylesheet" type="text/css" />
   

3. Initialize the Builder: Create a new instance of GridlessBuilder by specifying the wrapper element.

   var builder = new GridlessBuilder({
       wrapper: '.is-wrapper'
   });
   

4. Edit Content: The content inside the specified wrapper (e.g., <div class='is-wrapper'>) will now be editable.

5. Retrieve Edited HTML and Styles: After making your edits, use the following methods to get the HTML content and styles:

   var html = builder.html();
   var styles = builder.styles();
   

6. Save or Submit: You can then save the retrieved HTML and styles to your database or use them as needed in your application.

How to integrate OpenAssistantGPT with GridlessBuilder.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 GridlessBuilder.js website

   Log in to your GridlessBuilder.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.