Share And Deploy
Embed on Website
Discover how to seamlessly integrate your DocuChat chatbots into your website using iFrame or Widget options.
To integrate your DocuChat chatbots into your website, you can choose between two embedding options: iFrame and Widget, each offering unique benefits to suit your website's design and functionality.
Questions asked by external users through embedded chatbots will count towards your organization's monthly question credits. Make sure to set appropriate question limits if needed to manage your credit usage.
iFrame
Use an iFrame to embed the chatbot directly into the content of your web page. This method allows the chatbot to appear as a natural part of your site, providing a seamless user experience.
- Customizable Dimensions: Adjust the width and height of the iFrame (e.g., 100% width and 540px height) to fit your website's layout perfectly
- Show CTA Option: Toggle a call-to-action button at the top of the iFrame to encourage user engagement
Widget
The widget option adds a floating chat button on your website that opens the chatbot interface when clicked. This provides a clean, unobtrusive way to offer chat assistance.
- Custom Avatar: Set a custom avatar image URL to match your brand identity
- URL Targeting: Control which pages the widget appears on using URL patterns or regular expressions. For example:
example.com/docs/*- Show on all docs pages*.example.com- Show on all subdomains
- Flexible Positioning: The widget button automatically positions itself in the bottom right corner while staying out of the way of other page elements
- Interactive Experience: Opens a focused chat window when clicked, with the option to minimize or restore the conversation
How to Embed
- Access Embed Code: In the chatbots page of your dashboard, click the share button in the chatbot's row (or the share button in the top right when editing a chatbot). Enable the "Embed on website" option to access the embed codes.
- Choose Embed Type: Decide whether you want to use the iFrame or Widget option based on your website's design and user experience goals.
- Copy and Paste Code: Copy the provided embed code and paste it into your website's HTML where you want the chatbot to appear.
- Customize Appearance: Adjust the settings as needed to match your website's style, ensuring a cohesive look and feel.
iFrame Embedding
Widget Embedding