Configure Web Widget

Owned by Vemuri Mohana Raghuram (Unlicensed)
Last updated: Feb 05, 2021 by sneha.tripathi
2 min read

 

 

Context

As a Tenant Administrator, I want to configure a channel so that the end-users of the organization can interact with the Virtual Agent. Initially, I would like to configure a WebWidget channel for the organization.

 

Steps to Configure WebWidget

Step 1: Login to the Bot builder application

Log in to the Luma application with the Tenant credentials.

Step 2: Navigate to Channel Configuration

After a successful login to the Tenant account, in the left-hand navigation, go to Bots, Configurations, and select the Channel tab. This is where the channels are configured.

Step 3: Select the Channel to be configured

Click on the tile named WebWidget. This will open the configuration screen for Web Widget specifically.

Step 4: Copy the required data

Copy the Secret Key, the Header Code, and finally the Body Code and retain them in an easily accessible location such as a notepad or a text editor tool. These details will be used later when adjusting the web widget code on your website. You can use the copy icon to the right of each section to simplify the operation. 

Step 5: Download the code

In the Widget Code section, click the download icon to download the luma-web-widget.zip folder, which includes the index.html file, luma-web-widget.js file, and the web-widget.css file with images.

Step 6: Configure the details

Configure the Welcome Screen details.

  • Welcome Title: Give a title to your Welcome Screen.

  • Welcome Description: In the Welcome Description, you can define the purpose of the Virtual Agent, a brief overview, purpose, and capabilities of the bot.  

  • In the Customize Widget Color section, you can customize the color palette by entering or selecting the required primary color. You can also select the color from the list of common colors.

Step 7: Update the Status of the channel

Keep the Status of the WebWidget as Active for the end-users to access the Virtual Agent through WebWidget.

Step 8: Save the details

Click on the Save button to reflect the changes made in the WebWidget.

 

Installing the WebWidget on your Site

To install the WebWidget on your Site/Webpage, download the Widget Code (luma-web-widget.zip) provided in the Configurations tab under the WebWidget tile.

To configure the web widget on your web portal, do the following:

  1. Open the luma-web-widget folder.

  2. Open the index.html page of your web portal in a text editor. Update the details in the index.html page:

    1. Paste the contents of the luma-web-widget folder's index page into your index.html page.

    2. Paste the Header Code from the Web Widget configuration page

  3. Paste the Body Code from the Web Widget configuration page in the index.html.

    1. In the Script section of the Body code, update the Bot name, Display name (User Object), Client User ID, Secret Key, and Domain details.

  4. Save the index.html page. Now open the index.html page in the web browser. The Webwidget popup icon should be displayed on the bottom right corner. Click on it to go ahead and interact with the Virtual Agent. In case of any issues with the configuration, please contact the Serviceaide Support team.

To learn more about troubleshooting the WebWidget refer to Troubleshooting the Web Widget.

 

CALL TO ACTION: Assignments