How to Publish an Assistant on the Web

Tenjin uses the Microsoft Bot Framework webchat client. Sample code to embed the assistant is provided via the Channels page.

Inline help is available with detailed guidance on additional options.

To make Tenjin available on a web page, the Webchat channel is required. The steps below will show you where to find both the IFrame and Script versions of the code that you will need to publish your assistant.

A list of the main features available are:

• An easy to use one-line include script.
• Centrally stored styling options, meaning you can change your chat widget's appearance without having to re-embed the widget on your website; it's all editable and stored within your Tenjin assistant's webchat channel settings.
• The styling options within Tenjin help you select your colors by providing both a preview and accessibility guidelines / prompts, making sure your chat widget remains accessible for all users.
• The chat session can now be kept as your users navigate your website, meaning that if they have a conversation with your assistant and then navigate to a different page on your website, the chat popup will still contain their conversation; previously this would have been lost.
• For advanced users, the ability to fully customize your webchat widget with direct access to the underlying styling code, including an option to revert the styling back to the original values.

Accessing the Code

1. Navigate to your assistant.
2. Click the Webchat link on the main assistant panel.
3. You will then see the two snippets of code, similar to the screengrab above.

Embed Script

Embed Script is the recommended method of embedding Tenjin in your website. The code supplied demonstrates how to embed the webchat client using a JavaScript call along with some simple styling options.

There are many options available when it comes to styling the client, more than what we've included in our sample, for example, colors, fonts, spacing, and buttons. For more details on the customization options, please see the documentation on the Microsoft GitHub repository using the following links:

• https://github.com/microsoft/BotFramework-WebChat/blob/v4.15.1/packages/api/src/defaultStyleOptions.ts
• https://github.com/microsoft/BotFramework-WebChat/blob/v4.15.1/packages/api/src/StyleOptions.ts

Embed IFrame

Although not our recommended approach, you also have the ability to embed the assistant on your website by using an IFrame. This can be a simpler approach and does have some advantages over the Script option, such as the ability to display Tenjin in a pop-up, but it does reduce the styling options within the assistant.

Persistent Users

If you wish your bot to remember your user from session to session, then you must implement persistent users. for help implementing persistent users see the detailed in-line help.

Edit Settings

1. Click the Edit Settings button to change the look and feel of your Webchat bot. Detailed in-line help is available.
2. Clicking the ellipse button at the top right-hand side of your screen gives you the additional options to:
   • Revert to Default, undo any styling changes you have made, and revert to the default styling settings.
   • Edit as JSON, more advanced settings are available by editing the code in JSON format. In-line help is available.

Adding a Channel

1. Click the +Add Channel button on the right-hand side to add a channel.