How to embed a Cognigy.AI webchat in Sharepoint

Sharepoint is a widely used and highly customizable platform that can be further enhanced with its growing array of built in widgets. One such widget is the "Embed" webpart which is typically used to embed your favourite youtube videos, but can also allow the inclusion of a chatbot to add an element of natural language conversation to the Sharepoint platform.

This tutorial will take you through the steps of how to add a Cognigy.AI webchat to your Sharepoint site using the Cognigy.AI webchat widget. This is a simple process that requires use of an aws bucket and a basic understanding of how to generate a Cognigy.AI webchat widget html file for embedding. The process is as follows:

1. Create a Cognigy.AI webchat widget html file.
2. Upload the .html file to an aws bucket
3. Create an iframe tag with you aws bucket link
4. Embed the webchat into your Sharepoint site

1. Create a Cognigy.AI webchat widget .html file

Firstly, you must have and active Cognigy.AI webchat endpoint to use as the source for the webchat.

The structure for creating a Cognigy.AI webchat widget can be found here: https://github.com/Cognigy/WebchatWidget. Clone this repository and access the index.html file located in the /dist folder. The file appears as below:

Add your Cognigy.AI webchat endpoint config URL to replace the default endpoint on line 12. You can also update your webchat.js version by replacing ./webchat.js with a link to the latest release found here. Refer to the webchat widget documentation for how to add CSS styling for you webchat to your .html file.

2. Upload the html file to an aws bucket

The index.html file that you created in the previous step must be hosted on an AWS S3 Bucket site in order to use iframe tag which is the required format for embedding in sharepoint. Choose your hosting service such as https://aws.amazon.com/s3/ and upload your index.html file to obtain the link this hosted file.

3. Create an iframe tag with your hosting bucket link

Sharepoint accepts HTML iframe tags via it's embed feature to bring external apps to your site. It's simple to create an iFrame tag, all you need is the link to your index.html file from the previous step and an understand how high and wide you want your embedded webchat box to be. Here is an example:

<iframe width="560" height="900" src=" {INSERT INDEX.HTML FILE LINK HERE} "></iframe>

Simply add your link to the src property and adjust the height and width settings to your preference. Please note, the height and width properties are mandatory for Sharepoint web parts. You can find out more about iFrame notation and customization here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe.

4. Embed the webchat into your Sharepoint site

You Open your Sharepoint site as an administrator to you need to allow Sharepoint to access your hosting service in order to run the index.html file. You can do this in Sharepoint by selecting "settings" from the top right corner of the sharepoint site header, then select "site settings" > "view all site settings" > "HTML field security". Here you can add your hosting site to the list of domains allowed to insert iFrame content to your Sharepoint site.

Open your Sharepoint site with administrator permissions and edit the page where you wish to install the chatbot. Select the "+" icon to add a new section to the page. Typically, a webchat is located in a vertical box to the right hand side of the page, so it is recommended to select the "vertical section" option that will house the chat window. In your new vertical section, select the "+" icon to create a new "Embed" web part. A menu will appear, allowing you to add your iFrame code created in the previous step. You can then close the "Embed" menu.

(Ensure this site is allowed to embed in sharepoint settings)

- Edit the sharepoint site and an an iframe tag with the hosted HMTL file link (must include width/height params)

- Create index.html file for embedding a webchat endpoint