Web widget
The web widget will display a text bubble in the bottom right of your website.
The code required for the web widget can be accessed by opening the deploy dialog.
In the script you'll find one variable data-flow-id. To find out how you can customize your widget read the chapter chat widget.
<div id="recrubo-widget" data-flow-id="a12345cd-5d33-43b2-9266-e12ded31158e"></div><script type='module' src='https://widget.recrubo.app/chat/webwidget.js'></script>Adding the script
Locate the Appropriate Section
You typically want to include scripts in the <head> section or just before the closing </body> tag of your HTML document. This ensures that the script is loaded properly when the page is rendered.
Insert the widget code
Copy and paste the provided code snippet into the desired location in your HTML file.
Validate the data-flow-id
Validate if the value behind the data-flow-id matches the ID of the flow you are trying to place.Save the changes and validate that the widget is loading in the bottom right of the screen. Open the chat by clicking the 💬 button and validate if the correct chat is being displayed.
Multiple pages or Multiple scripts
To make sure the widget shows on all pages of your site the script needs to be added to every page. How to do this varies from site to site. Typically most sites have some sort of header & footer files that are added every page. Adding the script here will ensure the widget is loaded on every page.
If you want to have a seperate chatbot for every page your website will need to have a mapping of the pages and the respective data-flow-id for that site.
Last updated