How to Publish an Assistant in a Pop-Up to your Website

The instructions below demonstrate how you can add Tenjin to your own website within a pop-up panel, the pop-up will become visible when the "Ask Tenjin" link is clicked.

Prerequisites

1. You have downloaded the "Tenjin-Example-Popup.html" file, which is attached to the bottom of this page.
2. Administrator access to your Tenjin Assistant so that you are able to copy the IFrame embed webchat code from the Channels page. If you need more information please refer to the How to publish an Assistant on the web article.

Demo

To demonstrate the Tenjin pop-up, please open the "Tenjin-Example-Popup.html" file in your preferred web browser.

You will see an example website with an "Ask Tenjin" graphic towards the bottom-right of the page. Clicking the "Ask Tenjin" link will open the Tenjin assistant in a pop-up.

You can now interact with the Assistant and ask questions.

Adding Tenjin to your Website

If you would like your Tenjin Assistant to appear in a pop-up on your website, please follow the instructions below.

1. Open the "Tenjin-Example-Popup.html" file in your preferred HTML editor.
2. Copy the styling rules either to one of your website's CSS files, or directly into your website's primary template. The required styling rules to replicate the demo are documented within the "Tenjin-Example-Popup.html" file.
3. Copy the HTML and JavaScript contained within the "Tenjin-Example-Popup.html" file to the bottom of your website's pages / templates, making sure it is only included for the pages where you require the "Ask Tenjin" link to appear.
4. Using the IFrame embed code you've copied from the Tenjin Administration website, replace the IFrame tag in the HTML you've just pasted (step 3 above). There is an example of this in the Updating the Assistant that appears on your website section below.
5. That's it! Now it's time to test your website, find the "Ask Tenjin" link, and make sure everything works as expected.

If you would like to customize the link and / or the Assistant chat pop-up, please review the options below.

Customizations

Both the "Ask Tenjin" link and the Assistant chat pop-up can be customized, which you can either complete directly within the "Tenjin-Example-Popup.html" demo file, or after you've pasted the required content into your own website.

We have only included a small sample of what can be edited below, so if there is something you require that's not listed, please do not hesitate to get in touch.

Changing the Chat Image

When the Assistant chat pop-up appears there is an image that is displayed towards the top, which can either be changed or removed completely.

If you would like to change the image, you will need to update the 'src' (source) value on the image tag, as highlighted below, making sure you also update the width and height values accordingly.

<div class="chatbot__logo">     <img src="https://bds.biomni.com/tenjinimages/Contoso_MSP_Air.png" alt="chatbot__logo" width="150" height="150" /> </div>

If you would like to remove the image, you will need to delete the HTML shown below.

<div class="chatbot__intro">     <div class="chatbot__logo">         <img src="https://bds.biomni.com/tenjinimages/Contoso_MSP_Air.png" alt="chatbot__logo" width="150" height="150" />     </div> </div>

Updating the Assistant that Appears on your Website

In the future, if there is a need to change the Assistant that appears on your website, you will need to replace the IFrame tag with the one you have copied from the Channels page on the Tenjin Administration website, as documented in the How to publish an Assistant on the web article.

The IFrame code that will need to be replaced is demonstrated below.

<iframe title="Tenjin Webchat" src="https://webchat.botframework.com/embed/Tenjin001-192?s=yRkFi_J9iWM.QLfMZBTP4EsXfi21VAhM6GNrOG5SXFm4HxYE6VZnyew" style="min-width: 400px; width: 100%; min-height: 500px;"></iframe>