Published on

Embed Chatbot on Website: OpenAI Deployment Guide

Authors

Want to embed a chatbot on your website? This guide shows how to deploy chatbot on website using OpenAI, so you can launch AI chat for website support or sales in minutes, then customize and scale.

How to Embed chatbot on Website

This is the fastest path to go from “we want a chatbot” to “it’s live on our site.”

Step 1: Choose the widget style that fits your site

Pick one of these (you can always change later):

  • Bubble widget: sits in the corner, best for always available, user initiated help and discovery without interrupting the page experience.

    Embed a bubble widget

    Bubble widget with preview text

    Open the embedded bubble widget

    Opened bubble widget

  • Popup widget: opens as a modal, great for time-bound, guided data collection that can disappear once done.

    Embed a popup widget

    Popup widget with chat

    Embed a Standard widget

    Standard widget with chat

  • Standard widget: embeds directly inside a page layout, perfect for a dedicated chat page).

Step 2: Paste the embed code into your website

Where should it go? Paste it once on every page you want the chatbot to appear, before the closing </body> tag.

If you’re using a site builder, look for Custom Code or Footer Code:

  • WordPress: Custom HTML block, theme footer, or a header/footer code plugin
  • Webflow / Framer / Squarespace: Site Settings → Custom Code → Footer
  • Shopify: theme.liquid → right before </body>

You can read in more detail in this section.

The below html contains the code for a fully functional AI chatbot. Open the html in your browser and you can start chatting.

Before you open the html

  1. Make sure your chatbot agent is created in Predictable Dialogs so it can actually respond.
  2. Get your agentName from the Predictable Dialogs Install screen (you’ll replace it into the code below).
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Standard Example</title>
  </head>
  <body>
    <h1>Welcome to the Standard Chatbot Agent Example!</h1>
    <p>
      This is a basic HTML page with a standard chat agent embedded dynamically using JavaScript.
    </p>
    <script type="module">
      import Agent from 'https://cdn.jsdelivr.net/npm/@agent-embed/js/dist/web.js'
      Agent.initStandard({
        agentName: 'your agent name', // Generated on the Predictable Dialogs app
      })
    </script>
    <agent-standard style="width: 100%; height: 600px; "></agent-standard>
  </body>
</html>

If you are interested to learn why AI Chatbots matter, you can go to this article → AI Chatbots for Websites - Why They Matter & How They Work.

I have used several GPT embedding tools and have been very impressed with PD's integration, settings, themes etc. I haven't found a better embedding tool outside of your platform, much respect!
– Luke Peterson

Create & Add OpenAI Chatbot to Website

Now lets get into things in a little more detail. If you already created and ran a chatbot using the html, this is going to be a breeze.

Predictable Dialogs gives you full control over your data and chatbot behavior, you maintain:

  • Complete ownership of your data: Predictable Dialogs is designed to align with SOC 2 and ISO 27001 best practices.
  • Model selection flexibility
  • Customizable instructions and behavior
  • Transparent, usage-based pricing

The Predictable Dialogs integration with OpenAI retains all these benefits while saving development time and costs. This makes it an ideal business AI chatbot solution for companies wanting powerful AI capabilities.

I have tried your solution when experimenting with a couple other services, I love how easy it is to simply "plug and play" through your offering.
– Asif Farhan

Steps to Implement OpenAI Chatbot

We create a chatbot in 3 simple steps:

  • Create a new chatbot agent in Predictable Dialogs
  • Configure system instructions to define chatbot behavior
  • Optional: Enable file search for document-based responses

Your OpenAI chatbot is ready for deployment!

Customizing Your OpenAI Chatbot for Your Business

  • Tailoring Your Responses: You can adjust the chatbot responses to match the specific needs of your business. There are two aspects to this: - System Instructions or System Prompt: Writing good system instructions isn’t obvious, and you shouldn’t have to be a prompt engineer to get great results, the steps to write a good system instructions are: - Design a minimal but complete system prompt: Not necessarily short, but focused on exactly what your chatbot needs so it behaves the way you expect. - Refine based on real examples: We start with a lean prompt, test it on real questions, then add clear rules/examples where the bot gets things wrong. - Designing Your Brand Voice: Finally, you match your chatbot personality to your brand, this requires further changes to the system prompt. You can read more about that in this post → Design Your Chatbot's Personality: Brand Voice.

    • Adding your knowledge: You can add your docs, FAQs or PDFs, the AI will use this to respond. If you are interested to understand how this works, you can read this post → OpenAI file upload

  • Customizing the Chatbot UI: You can make your chatbot look and feel like your brand, by matching the Chatbot UI elements to your brand's colors, fonts, and overall vibe. With the right adjustments, your chatbot will fit into your website seamlessly, enhancing the OpenAI chatbot user experience.

A standard widget with a little styling is shown below a WhatsApp inspired design: Example of embedded chatbot on website with WhatsApp-inspired theme

How to Integrate an OpenAI Chatbot into a Website: Deploying Your Chatbot

  • Adding An OpenAI Chatbot To Wordpress Without Coding: To add an OpenAI chatbot to a Wordpress site is really simple using the Predictable Dialogs html code. Once the html code is generated on the app, the html code can be inserted anywhere on the Wordpress site to enable the chatbot. The following post outlines in detail how to go about adding the code to your Wordpress site → Step-by-step guide to add an OpenAI chatbot to a Wordpress site.
  • Adding An OpenAI Chatbot To A React Website: This article shows you how to integrate OpenAI's chatbot into a React app using Predictable Dialogs. You'll learn how to set up the project, and install the @agent-embed/react library. With this guide you'll be able to create a seamless, branded chatbot experience using React.js in no time → Step-by-step guide to add an OpenAI chatbot to a React website.
  • Adding An OpenAI Chatbot To A NextJS Website: Add an OpenAI chatbot to your Next.js site using Predictable Dialogs, which helps you deploy customizable AI widgets fast. Install the @agent-embed/nextjs library in your Next.js project, then import one of the widget components like Standard, Popup, Bubble. Customize further with unique colors, fonts, and layouts. Here is a Step-by-step guide to add an OpenAI chatbot to a NextJS app.
  • Adding An OpenAI Chatbot To Your Website Using HTML or JavaScript: Predictable Dialogs enables simple integration of OpenAI Assistants into any website using minimal HTML code. Just import their JavaScript library, initialize with configuration parameters, and place the widget element on your page. The solution offers customizable styling, multiple widget formats, and seamless communication with OpenAI's powerful AI models. Here is a Step-by-step guide to add an OpenAI chatbot to a HTML/JS website.

Check out this post for a deep dive into creating custom Chatbot UIs → How To Design a Branded Chatbot UI with OpenAI Assistant

Conclusion

By following the steps outlined in this guide, you can transform your website into an interactive platform that engages visitors 24/7. Whether you're focused on enhancing customer support, generating qualified leads, or streamlining business processes, an OpenAI powered chatbot solution offers unprecedented capabilities that were previously available only to enterprises with substantial development resources.

Predictable Dialogs makes AI integration effortless. Get started to embed a chatbot on your website

I enjoy using your program and think it is far and away the best option for this usage. I wish it was better known.
– The John Family