How to: Embed a chatbot on a webpage

The Power Pages design studio doesn't have the ability to add a chatbot component to a webpage using the components panel.

Note

You can add a chatbot using the legacy portal Studio for websites created in Power Apps.

The following steps provide an alternative method to embed a Power Virtual Agent chatbot on a Power Pages webpage.

Prerequisites

• A Power Pages subscription or trial. Get a Power Pages trial here.
• A Power Pages site created. Create a Power Pages site.
• A Power Virtual Agents subscription or trial. Sign up for a Power Virtual Agents trial.
• A Power Virtual Agents chatbot. Create and delete Power Virtual Agents bots.

Locate chatbot ID

In the following steps, we'll get the chatbot ID that we'll use to embed into Power Pages.

1. The Power Virtual Agents home page, select Publish from the side menu.

2. In the Optimize your bot section, choose Go to Channels.

   

3. In the Channels section, select Custom website.

4. In the slide-out panel in the Default embed code section, select and copy the code following the /bots/ path (this code is the chatbot id).

   

Add chatbot to the site

In the following step, we'll update the Bot Consumer table with our chatbot information.

1. Go to Power Pages.

2. Select Edit on the site you want to add the chatbot.

3. Select Data workspace.

4. Locate the Bot Consumer table.

5. Select the blank row.

6. Select Edit row using form

7. Enter in the following values into the table:

   Field	Data
   Name	Any name you choose, for example TestBot
   Bot Schema Name	The chatbot ID you copied from the Power Virtual Agent page. For example: new_bot_df0a07025507434b9ebb085434ac755f.
   Website	Select the lookup to the website where you want to host the chatbot.
   Config Json	Key-in parentheses characters. {}

   

Add chatbot to website or to specific webpages

The following steps will specify if the chatbot will be visible on all pages of the site or only on specific pages.

• If a chatbot is only linked to one or more webpages, and no chatbot linked to a website, then the chatbot will only appear on those pages.
• If a chatbot is linked to a website, it will appear on all webpages.
• If both a website and webpages are linked to chatbots, the chatbot linked to the specific webpage will take precedence, and the chatbot linked to the site will appear on all other pages.

Note

Once you specify relationships to either the website or the webpage records, you will be unable to remove the association and will need delete and recreate the bot consumer record and re-establish the relationships.

Add chatbot to website

1. Select the Related tab, select Websites.

2. Select Add Existing Website

3. Choose the website where you want to host the chatbot.

   

4. Select Add.

5. Select Save & Close

6. Select Done on the Currently editing a row pop-up window.

Add chatbot to specific webpages

1. Select the Related tab, select Websites.

2. Select Add Existing Website

3. Choose the website where you want to host the chatbot.

   

4. Select Add.

5. Select Save & Close

6. Select Done on the Currently editing a row pop-up window.

Testing your chatbot on Power Pages

1. Select Preview, followed by Desktop to preview the site

2. You should be able to view and interact with your chatbot.

   

See Also

• Power Virtual Agents