How to embed and test a Botpress bot on any website?
Tags: botpress, hack, tampermonkey, chatbot
Published: 2021-02-19 05:57:16

---
title: How to embed and test a Botpress bot on any website?
published: true
description: 
tags: Botpress, hack, tampermonkey, chatbot
cover_image: https://aabingunz.com/wp-content/uploads/2020/01/Reverse-gradient-white-blackbackground.png
---
[![How to embed and test a Botpress bot on any website?
](http://img.youtube.com/vi/prd5Y8fLJiI/0.jpg)](https://youtu.be/prd5Y8fLJiI)
You have created your Botpress bot and now you want to visualize it on your production website, but without exposing it to your customers. How can we achieve this? In this post we will see how to embed and test a Botpress bot on any website.
<p>We will use a similar script which we discussed in <a href="https://aabingunz.com/botpress-chat-widget-to-your-website/">one of my previous</a> posts, but this time we will use it along with <a href="https://www.tampermonkey.net/">Tampermonkey</a>, a tool to manage your user scripts and run scripts on the active website. </p>
<p>I will use <a href="https://www.google.com/chrome/">Google Chrome</a> <a href="https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo?hl=en">Tampermonkey extension</a> to store my embed script. Please follow the below steps</p>
<ul><li>Install the Tampermonkey Google Chrome extension using your chrome browser</li><li>Once installed it should appear on your chrome toolbar</li></ul>
<div class="wp-block-image"><figure class="aligncenter size-large"><img src="https://aabingunz.com/wp-content/uploads/2020/04/image.png" alt="Tampermonkey icon on Google Chrome toolbar" class="wp-image-2112"/><figcaption>Tampermonkey icon on Google Chrome toolbar</figcaption></figure></div>
<ul><li>Open any desired website, click on the tampermonkey icon and then "Create a new script..." from the dropdown menu.</li></ul>
<div class="wp-block-image"><figure class="aligncenter size-large"><img src="https://aabingunz.com/wp-content/uploads/2020/04/image-2.png" alt="" class="wp-image-2114"/><figcaption>Create a new script in Tampermonkey</figcaption></figure></div>
<ul><li>It should open a new tab where we will write our Botpress embed script. Please ensure that @match points to the website on which you want to embed your bot. In my example I am using <a href="https://aabingunz.com">https://aabingunz.com</a> </li></ul>
<div class="wp-block-image"><figure class="aligncenter size-large"><img src="https://aabingunz.com/wp-content/uploads/2020/04/image-3.png" alt="" class="wp-image-2115"/><figcaption>Tampermonkey user script template for the active website</figcaption></figure></div>
<ul><li>Replace your bot id and bots host port details in below snippet and paste this snippet below "//Your code here...". <strong>Note</strong>: Your bot must be served over HTTPs. Please check <a href="https://aabingunz.com/how-to-enable-https-in-botpress/">How to enable HTTPS in Botpress?</a> tutorial for enabling HTTPs on your Botpress bot.</li></ul>
```javascript
const script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'https://<host>:<port>/assets/modules/channel-web/inject.js';
    document.getElementsByTagName('head')[0].appendChild(script);
    script.onload = function() {
        window.botpressWebChat.init({
            host: 'https://<host>:<port>',
            botId: '<botid>',
            extraStylesheet: 'https://<host>:<port>/assets/modules/channel-web/custom-style.css'
        });
    }
```
<ul><li>Save your script and enable your script by toggeling "Enabled" switch in Tampermonkey</li></ul>
<div class="wp-block-image"><figure class="aligncenter size-large"><img src="https://aabingunz.com/wp-content/uploads/2020/04/image-4-1024x178.png" alt="Tampermonkey saved scripts" class="wp-image-2119" title="Tampermonkey saved scripts"/><figcaption>My saved scripts in Tampermonkey</figcaption></figure></div>
<ul><li>Now open <a href="https://aabingunz.com">https://aabingunz.com</a> or whatever website you configured. You should be able to see and test your bot.</li></ul>
<div class="wp-block-image"><figure class="aligncenter size-large"><img src="https://aabingunz.com/wp-content/uploads/2020/04/image-5.png" alt="" class="wp-image-2120"/><figcaption>Ensure that you see a 1 notification on Tampermonkey icon</figcaption></figure></div>
<p>That's it. This is how we embed and test a Botpress bot on any website. Let me know in comments what other cool things you can accomplish using Tampermonkey.</p>
This article was first posted on https://www.aabingunz.com. <a href="https://aabingunz.com/how-to-embed-and-test-a-botpress-bot-on-any-website/">Click me</a> to read from the author’s blog and find more Botpress tips and tricks on my <a href="https://aabingunz.com/category/botpress/">blog</a>.