Back to No-Code Website Builders

Integrate AI chatbots with Elementor

Elementor is the leading website builder for professionals on WordPress.

Overview

Elementor is a powerful no-code website builder for WordPress that allows users to create and manage websites effortlessly.

Unique Features:

  • Live Drag & Drop Editor: Easily design pages by dragging and dropping elements.
  • Extensive Template Library: Access 100+ full website kits and sections.
  • Custom Code Integration: Supports custom HTML, CSS, and JavaScript.
  • Built-in Hosting: Managed hosting powered by Google Cloud for optimal performance.
  • Comprehensive Resources: Offers tutorials, a developer hub, and a vibrant community for support.

Add Custom HTML Documentation

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

  1. Drag the HTML Widget:
    From the widget library, choose the Elementor HTML widget (</> icon) and drag it to your desired location on the page.

  2. Add Your Code:
    Enter your HTML code in the text area.

    • Wrap all CSS with <style> tags at the beginning.
    • Wrap all JavaScript with <script> tags at the bottom.

  3. Preview Your Code:
    Save your changes and preview the page in a new browser tab to see how it looks.

  4. Using Elementor AI (Optional):
    If you have Elementor Pro, you can use Elementor AI to generate HTML code. Drag the HTML widget, select 'Code with AI', and input your request to generate code automatically.

  5. Save and Test:
    Always save your work and test the functionality of the added code to ensure it works as expected.

Integration Guide

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

How to integrate OpenAssistantGPT with Elementor

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

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