3.2 – Adding GPTs To Your Website With Botpress (Part 2) Lesson

Lesson Overview

Adding a custom GPT chatbot to your website can enhance customer support, answer FAQs, and give your visitors direct access to AI-powered assistance tailored for your business. This lesson walks through the process in Botpress: from locating your chatbot, ensuring integration is enabled, to making visual customizations with the built-in style sheet editor. After that, you’ll see how to copy the embed code and place it directly into your website builder—making the bot live for site visitors in just a few clicks.

Wix is used in the demonstration due to its popularity, but the workflow is similar on almost any web platform that lets you add custom HTML. Adjusting the chatbot’s look helps with brand consistency, while toggles and settings in Botpress allow you to control how the bot behaves, such as letting users clear conversations or hiding Botpress branding. The process is helpful for entrepreneurs, small business owners, or anyone wanting to increase website engagement without needing to write code from scratch. Experienced users and developers can further customize the integration if needed, but the standard embed covers most everyday requirements.

Who This Is For

This lesson is ideal for anyone looking to add a custom AI chatbot to their website without complex setup or coding skills. It’s particularly useful if you:

• Run a business and want to provide instant answers or support to site visitors
• Manage website content and want quick customization options
• Use platforms like Wix, Squarespace, or similar site builders
• Need to match a chatbot’s appearance to your brand
• Are considering basic chatbot integrations before moving to more advanced ones
• Want an overview of the low-code embedding process, even if you later work with a developer

Where This Fits in a Workflow

You’ll use this lesson’s approach once your chatbot is built and ready to go public on your site. After defining its functions and responses in prior lessons, you now shift focus to making the bot look and behave in line with your needs, and then physically placing it on the website. For example, after customizing and embedding your policy bot, you could use it to answer staff questions or field support requests directly on your company site. If you later update the style or function, you can return to these Botpress settings and reapply them, keeping your bot fresh and aligned with evolving brand assets or user needs. This step acts as the bridge between bot creation and daily, visitor-facing use.

Technical & Workflow Benefits

Traditionally, adding interactive AI chat to a website required custom development, multiple tools, or months of back-and-forth with IT. With Botpress’s embed options, this work condenses to minutes—no advanced coding is needed, and design tweaks are managed with a style sheet editor. Using the pre-configured embed code, as shown here, means the technical lift is minimal, and updates can be made almost instantly.

For example, customizing the chatbot’s color or welcome text for a marketing campaign takes just a settings adjustment—there’s no need to edit code or redeploy new versions. Business owners, educators, and solopreneurs can independently maintain and update their bots, creating a smoother workflow and quicker changes. When more flexibility is required, developers can use advanced settings starting from this same simple base setup. This approach consistently saves time, maintains visual consistency with your brand, and lets you deploy AI-driven chat where you need it most.

Practice Exercise

Choose a live or test website you manage (Wix, Squarespace, or similar) where you can add custom HTML.

1. In Botpress, locate your chatbot and use the settings tab to choose a new primary color and update the bot’s name or description to reflect your brand.
2. Copy the pre-configured embed code and add it to a new section on your website using the "embed HTML" function. Adjust the size and placement as needed.
3. Preview the result live. Does the chatbot appear with your new settings? Test sending a few sample queries to ensure it functions as expected.

Reflect: Was there any part of the style or embed process that didn’t match your expectations? How might you further customize the appearance or behavior before launching to real users?

Course Context Recap

This lesson builds upon your previous work building and refining custom GPTs in Botpress. Now that you’ve learned how to embed and visually customize your chatbot for web use, you’re ready to deploy it to visitors and gather feedback. Upcoming lessons will explore connecting your chatbot to other channels like Slack or WhatsApp, taking your AI assistant beyond the website. Continue with the course to unlock these integrations and expand your bot’s capabilities even further.