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:

The embed code should be a one-line javascript, that shold not interfere with the page loads. The embed code should be available on the user's "use your chatbot" page.
The styles of the embed should not interfere with the hosting website
The user should be able to track activity across their embeds

I looked around for inspiration and came across Drift's Live Chat feature. Drift does an elegant job of providing a javascript snippet 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;DR version of the implementation - I created a presbot-widget.js and structured it to pre-load some required javascript libraries. I passed some required values (such as the chatbot url) 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 your chatbot on your personal website.

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

 <script async data-chaturl="http://www.presbot.com/1-presbot/embed/chat" data-first_name=Sentinel src="https://presbot-assets-prod.s3.amazonaws.com/static/js/presbot-widget.js"></script> 

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!