Back to No-Code Website Builders

Integrate AI chatbots with Divi

Divi: A leading no-code visual builder with custom HTML integration for limitless design flexibility.

Overview

Divi by Elegant Themes is a leading visual page builder for WordPress that enables users to design websites without coding.

Unique Features:

  • Drag-and-Drop Interface: Simplifies the website creation process.
  • Custom HTML Integration: Allows users to add custom code easily via the Code Module.
  • Responsive Design: Ensures websites are mobile-friendly.
  • Pre-made Templates: Offers a variety of templates and modules to enhance design efficiency.

Add Custom HTML Documentation

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

  1. Install and Activate Divi: Ensure that the Divi theme is installed and activated on your WordPress site.

  2. Create a New Page: Go to your WordPress dashboard, select 'Pages', and click 'Add New'.

  3. Enable Divi Builder: Click on the purple button that says 'Use The Divi Builder' to load the Divi Visual Builder.

  4. Add a Section and Row: Once in the Visual Builder, Divi will automatically add a section and a row for you.

  5. Insert the Code Module:

    • Click the grey '+' icon inside the row to open the Divi Module Library.
    • Search for and select the 'Code' module.

  6. Paste Your HTML Code:

    • In the Code Module settings, paste your HTML code into the content area. Ensure you use proper opening and closing tags.

  7. Customize Settings (Optional): You can adjust the design settings for the module as needed.

  8. Save Changes: Once you are satisfied with your HTML integration, save your changes and exit the Visual Builder.

Using the Integration Tab

  1. Access Theme Options: Go to 'Divi' > 'Theme Options' in your WordPress dashboard.

  2. Navigate to the Integration Tab: Here, you can add code snippets to the header, body, or footer of your site.

  3. Add Your HTML Code: Place your HTML code within the appropriate tags (e.g., <script> for JavaScript, <style> for CSS).

  4. Save Changes: Ensure to save your changes to apply the code site-wide.

Integration Guide

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

How to integrate OpenAssistantGPT with Divi

  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 Divi website

    Log in to your Divi 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 Divi, 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