Blog   > Embed Any Presbot On Any Website

I received a few requests recently to allow presbots to be embedded on any website. It made perfect sense. I bumped this up on my backlog and started planning out my approach and listed down my options to implement this, here're some initial thoughts and implementation goals:

I looked around for inspiration and came across Drift's Live Chat feature. Drift does an elegant job of provinding a javascript snipper that allows you to embed a chat widget on your website. I loved the idea and decided to implement it on my own.

Here's a tl;drI version of the implementation - I created a presbot-widget.js and structured it to pre-load some required libraries (such as jQuery, Popper). I passed some required values (such as path to my css, chat url, img url and others) in the data attributes of the script and just appended the html body which inlcuded the modal and the chatbot in an iframe to the body tag of the host. The result was a simple one-line javascript snippet that would embed any chatbot on any website,

Here's an example, in case you'd like to try embedding Sentinel Prime's Chatbot on your Wesbite for fun:

<!-- Start of Async Presbot Code -->
<script async data-chaturl="http://www.presbot.com/1-presbot/embed/chat"data-cssurl="https://presbot-assets-prod.s3.amazonaws.com/static/css/presbot-widget.css"data-first_name=Sentinel data-imgurl=https://presbot-assets-prod.s3.amazonaws.com/media/images/profile/sp_1.jpeg src="https://presbot-assets-prod.s3.amazonaws.com/static/js/presbot-widget.js"></script>
<!-- End of Async Presbot Code -->

You can also find the embed code by navigating to Sentinel's page and click Embed on the top right of the chat card. I have some ideas to make this sleek and avoid passing assets urls directly, but for the time being this implementation works effectively.

Let me know if you have any thoughts of how this could have been done differently or better at hello@presbot.com

Keep watching this space for more write-ups and interesting articles from my experience developing Presbot.

Have a good one!

Read 450 times
Presbot is a new platform to create reliable,
no-code, lightning fast chatbots.

Host and Embed your chatbot – for free!
Demo Profile (No Signup Required)               
Recommended (3)
Card image cap
Introducing Presbot Feeds

I am really excited to introduce a new feature called - Feeds.

Feeds allows the community to share information, updates... read more

Card image cap
Introduction To Presbot

Presbot is a platform to create reliable, no-code, lightning fast chatbot profiles. It allows you to host and embed your personal or professio... read more

Card image cap
Why I Made My Own Blog

I was at a point where I had to choose if I wanted to spin my own blog to use an existing platform. The choice was clear, for the love to creative ... read more