Framer

How to add a Dropchat bot to your Framer website

Embedding a Dropchat bot on your Framer site to create the perfect AI assistant.

First, log into your Dropchat account.
Click into any of the chatbots you have made previously. If you have not made a chatbot before, check out this guide. In this example, we will use a chatbot we already made from a PDF of the Bitcoin white paper.
After clicking into your chatbot, navigate to the “Manage Chatbot” tab towards the top left.

In the middle section, under “Share Chatbot”, click the blue “Embed” button.

A pop-up will appear with options on how to add a Dropchat to your site. In this example, we will be creating a chat bubble in the bottom right of your site, which is the most user-friendly option for most websites.

Click the “Copy Code” icon on the top code snippet option.

Now that you have this code snippet copy-pasted, we can go to Framer.

You can insert custom code at the start or end of the <head> and <body> tag of your site.

Custom code and scripts will be added to every page across the published site. These changes will not be visible in your preview, only in the published site.

In order to insert custom code, click on the name of the project to access the Site Settings and scroll down to the Custom Code section. Copy and paste the Dropchat code snippet in the head or body tag text box.

Framer

How to add a Dropchat bot to your Framer website

Products

Getting Started

Resources

Company