Embedding a Dropchat bot on your Typedream 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 Typedream.
In Typedream, there are two ways in which you can embed embed Dropchat on your site.
- Across your entire site (Note: this will require being on at least the Launch plan on Typedream)
- On individual pages only (free for up to 1 page)
To add Dropchat to your entire Typedream site:
- In your Typedream workspace, select the site you want to add Dropchat to (in this example, we will be using a blank site project for demonstration purposes).
- Click "Site Settings" on the left-hand side.
- From there, click on "Code Injection" on the left-hand side.
- Click on "Code Injection" on the left-hand side.
- Finally, paste the code snippet from Dropchat under the Header or Body text box. Make sure the changes are saved, and your chat assistant bot will be live on your published Typedream site, on every page.
To add Dropchat to individual Typedream pages:
On your Typedream page, you can embed code, videos, forms, and more onto your web page using the /embed block.
- On your Typedream page, type "/embed" into the text block and select the "Embed" option.
- Then, navigate to the click into the new embed block (highlighted in purple) and navigate to to the "Code" tab.
- Paste the code-snippet you copied from Dropchat earlier into the code box and click "Insert Code"
- Now you should see a big invisible box in the place of the embed box from earlier.
- Hit "Publish" at the top right, and your Typedream site will be live. You will see the Dropchat bot bubble in the bottom right icon of your published site.