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 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:

<!-- Start of Async Presbot Code -->
<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>
<!-- End of Async Presbot Code -->

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 6,821 times
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