Skip to content

Open Chat Studio Widget

The Open Chat Studio Widget is a customizable chat component that allows you to easily embed conversational AI bots into any website. Create engaging user experiences with minimal setup and extensive customization options.

Features

  • Easy Integration: Add to any website with just a few lines of code
  • Flexible Embedding: Choose between widget component or iframe methods
  • Custom Styling: Match your brand with CSS variables and custom themes
  • Welcome Messages: Greet users with personalized messages
  • Starter Questions: Guide users with pre-defined clickable questions
  • File Uploads: Allow users to attach files to their messages
  • Responsive Design: Works seamlessly across desktop and mobile devices

Getting Started

Before embedding, you must create a bot in Open Chat Studio.

  1. Add the widget script to your site's <head> section:

    <script type='module' src='https://unpkg.com/open-chat-studio-widget@0.5.2/dist/open-chat-studio-widget/open-chat-studio-widget.esm.js' async></script>

  2. Getting the Embed Code

    1. Log in to Open Chat Studio.
    2. Navigate to the Chatbot you wish to embed.
    3. Click on the (plus) icon and select Embedded Widget from the dropdown.
    4. Complete the form (provide a name and any configuration options) and click Create.

    A new dialog will open with all the necessary details to embed your bot. You can either copy the chatbot ID and embed token for manual setup or use the Copy Widget Embed Code to copy a fully configured HTML snippet.

  3. Insert the widget where you want the chat button.

    The embed code snippet should look something like this:

    <open-chat-studio-widget
  visible="false"
  chatbot-id="{CHATBOT_ID}"
  embed-key="{EMBED_KEY}"
  button-text="Let's Chat"
  position="right"
  expanded="false">
</open-chat-studio-widget>

Embed Key Required

The embed-key parameter is required for all embedded widget channels. If you are upgrading from a previous version, you must create a new Embedded Widget channel (following the steps above) to obtain your embed key.

Test the Chatbot

  1. Open your website in a web browser.
  2. Ensure the chatbot appears and functions as expected.
  3. Try sending a message to confirm it responds correctly.

Troubleshooting

If the chatbot does not appear:

  • Ensure you copied and pasted the embed code correctly.
  • Clear your browser cache and refresh the page.
  • Check that your website allows embedding external scripts.