Back to No-Code Website Builders

Integrate AI chatbots with CoffeeCup Site Designer

Fresh Software, Warm People.

Overview

CoffeeCup Software's Site Designer is a responsive website builder that allows users to create websites without coding.

It features a drag-and-drop interface, customizable components, and supports CSS frameworks like Bootstrap and Materialize.

The tool is designed for ease of use, targeting non-technical users while enabling advanced customization through visual workflows.

Users can purchase a perpetual license, avoiding ongoing subscription fees.

Add Custom HTML Documentation

Step-by-Step Guide to Integrate Custom HTML in CoffeeCup Site Designer

  1. Open Your Project: Launch CoffeeCup Site Designer and open your existing project or create a new one.

  2. Add HTML Element:

    • Navigate to the Elements Pane.
    • Drag and drop the HTML Element onto your desired location in the layout.

  3. Access the HTML Code:

    • Click on the HTML Element you just added.
    • Open the Element Pane or the Inspector Pane.
    • Click on the green HTML indicator to launch the code dialog.

  4. Edit Your HTML:

    • In the dialog box, enter your custom HTML code in the designated area labeled "Enter your HTML for the Element".

  5. Add CSS and JS (Optional):

    • To add custom CSS, go to the box labeled "Enter your Head Code for this Element" and click Edit.
    • For JavaScript, use the box labeled "Enter your Footer Code for this Element".

  6. Preview Your Changes:

    • Click on the preview button to see how your changes look in action.

  7. Save Your Work:

    • Don’t forget to save your project to keep your changes.

  8. Reuse Components:

    • Save custom code to your Components Library for easy access in future projects.

Additional Tips:

  • For adding verification codes or other scripts to the head section, go to Pages in the top toolbar, select Manage Project, and scroll down to Custom Code Settings to add your code there.

Integration Guide

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

How to integrate OpenAssistantGPT with CoffeeCup Site Designer

  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 CoffeeCup Site Designer website

    Log in to your CoffeeCup Site Designer 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 CoffeeCup Site Designer, 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