How to add a bot to a website using Blip Chat January 23, 2023 14:47 Updated Index: Integrate a bot to a website as a widget Embed a bot to a website inline To integrate your bot to a web page with Blip is very simple. For that, you will need to publish your bot on the Blip Chat channel. The channel allows a bot to be integrated into a website in two different ways: as a widget or embedded on the website, next to the website's HTML body. Before you start, access the portal and choose the bot you want to place on your site. Integrate a bot to a website as a widget Click on the Channels module (on the Blip portal) and choose the Blip Chat channel. Click on the Settings tab and enter the domain of the site (s) you want to place Blip Chat on. Note: This is a mandatory operation. For security reasons, your bot will only work on pages whose domain has been previously enabled on the Blip portal. In the example in the image below, Blip Chat will only load on pages whose domain is yourdomain.com Click on the Installation tab, copy the presented script and paste it into the body of your web page. Embed a bot to a website inline Repeat the same 3 steps of the integration mode as a widget. Make a change to the copied script on the portal The standard Blip Chat integration script is identical to the script below (except for the key, which is unique for each bot). <script src="https://unpkg.com/blip-chat-widget" type="text/javascript"></script><script> (function () { window.onload = function () { new BlipChat() .withAppKey('YOUR-BLIP-CHAT-KEY') .withButton({"color":"#2CC3D5"}) .build(); }})();</script> To embed the interface in an HTML element with your site's 'your-element-id', change the script as follows: <script src="https://unpkg.com/blip-chat-widget" type="text/javascript"></script><script> (function () { window.onload = function () { new BlipChat() .withAppKey('YOUR-BLIP-CHAT-KEY') .withButton({"color":"#2CC3D5"}) .withTarget('your-element-id') .build(options); }})();</script> Comments: Regardless of the form of integration, some customizations are still possible to personalize the user experience with the Blip Chat interface. To check all the details, click here. For advanced settings of the Blip Chat script on the web, see the project on GitHub. For more information, access the discussion on the subject in our community or the videos on our channel. 😃 Related articles Features of the Blip Chat Widget How to customize Blip Chat Widget using CSS How to add Blip Chat to a WordPress site Adequacy of URLs How to add Blip Chat to a Wix site