How to add an AI chatbot to SharePoint Modern Online

You want to embed your custom trained AI support agent in your SharePoint Modern Online website page. Here’s how to add an AI support agent to SharePoint Modern Online with SiteSpeakAI.

Video transcript

People in your company have questions. How many leave days do I get? How do I reset my password? Where is the expense form?The answers are already on your SharePoint site. A SiteSpeak AI agent can find them and answer these questions at any time. This video shows how to train the agent on your SharePoint content, test it, and add it to a SharePoint page. It also shows how to send difficult questions to your team, and how to make the answers better.Step 1. Make the agent. Log in to SiteSpeak. Type a name for your agent. Your SharePoint site is private, so SiteSpeak cannot read it from a URL. Click Skip and Add Other Sources.Step 2. Train the agent on SharePoint. Open Sources, under Training and Content. Under App Integrations, find SharePoint, and click Connect. Sign in with your Microsoft account. Select your SharePoint site. Select Document Libraries to add documents, or Site Pages to add pages. Select the items that you need. Then click Add Selected. SharePoint sources are available on the paid plans. Auto-sync updates these sources on a schedule. Auto-sync is available on the Pro Plus plan and higher.Step 3. Test the agent. Open Test Agent. Ask three questions that your staff ask. For example, ask about leave, passwords, and expenses. Read each answer. If an answer is not correct, add the missing information in Training and Content.Step 4. Brand the agent. Open Appearance. Set the Accent Color to your brand color. Under Icons, upload your logo. Type a Welcome Message. For example: Hi, ask me about HR, IT, or company policies.Step 5. Install Power Popups. SharePoint does not let you add code to your site. Use the Power Popups app to show the agent. Power Popups is an app from a different company. Check its price before you start. Go to Microsoft AppSource, and find Power Popups. Click Get it now. In the SharePoint Store, click Add. Power Popups is now in Site contents.Step 6. Add the agent to a page. In SiteSpeak, open Install Agent, and select iFrame. Copy the URL that is inside src. In SharePoint, open the page, and click Edit. Add a new section above the footer, with three columns. In the right column, add the Power Popups web part. Then click Edit web part. In Trigger Configuration, set Popup Trigger to Button. Type the button text. For example: Ask a question. In Content Configuration, set Popup source to Page URL. Paste the URL in Page URL. Click Apply. Then click Republish. Now the button opens the agent on this page. Power Popups works on one page at a time. Add it to each page where you want the agent.Step 7. Send difficult questions to your team. Some questions need a person. For example, a locked account, or a pay problem. Open Settings, and go to Escalations. Turn on Enable Escalations. Type the email address of your team. When a user asks for a person, the agent sends the conversation to your team. You can read and reply to all conversations in the Inbox. Escalations are available on the Pro plan and higher.Step 8. Make the answers better. Open the Dashboard. Look at Top Unanswered Questions. These are the questions that the agent could not answer. For each question, add the missing information. Or add an Updated Answer. Do this each week. Then the agent can answer more questions each week.Start at sitespeak.ai.

​

Add your AI support agent To your SharePoint Modern Online website

SharePoint Modern Online sites are web-based, responsive collaboration tools within Microsoft 365, designed for rapid creation of engaging intranets and content management. They offer a modern UI, mobile responsiveness, and easy customization using modern web parts, empowering users to build sites in seconds. SharePoint doesn’t allow adding custom HTML as other website builders do. You can use Microsoft Copilot Studio to create a webpart but we found a Power Popups app that will do the job for us. This popup can be triggered by clicking on a button, a link or an image. Power Popups offer a 7 day free full function option which allows you to test the functionality. Due to the fact that we have no access to the header and footer code of the website, the popup can not be added to display site wide, you must add the popup to each page of your website. In this tutorial we will look at an image as a trigger. The button is similar but can only contain text on it so you can put any relevant text on it. The image will be displayed with a minimum size of 100x100px. You can play around with the size. The popup trigger will be added to a section. Sections can have different layouts, i.e. 1, 2 or 3 columns but we suggest a 3 column layout so you can basically add the popup trigger left, center or right.

​

In SiteSpeakAI

Select your AI support agent from the dropdown menu at the top, click on the Install Agent section in the sidebar and select the iFrame option. Then select and copy the iframe source URL. This will be used as the URL for the iFrame being displayed in the popup.

​

In SharePoint Modern Online

1. Obtain your Power Popups webpart.

• Goto https://appsource.microsoft.com/en-US/home.
• Click on the Apps dropdown and select SharePoint apps.

• Scroll down until you get the Power Popups app and click on Get it now.

• Confirm your details and click on Get it now to start installation.

• The SharePoint Store will now be displayed. It also displays a video link where the popup is explained. Click on Add.

• The app (webpart) will then be added to the Apps site in SharePoint and will be visible under Site contents. It will be available as a webpart for your SharePoint website.

2. On your SharePoint start page, select the website you want to work with.

3. If you want to add the popup trigger as an image you will have to add the image to the site library. You can add it to the site assets. You will find Site Assets under Site contents. Upload you image to Site Assets via the upload option.

4. Return to your website page and prepare the area you want to add the popup trigger to.
5. Click on Edit to open the page in edit mode.

6. Insert a new section just above the page footer.

7. Select a 3 column section. This will allow you to place the popup trigger left, center or right on the page.

8. Insert a webpart in the right most column.

9. Scroll down and select the Power Popups webpart.

10. Highlight and delete the webpart title. This will remove the additional title while displaying the popup trigger.

11. Click on Edit web part.

12. We will now configure the popup web part. The following parts must be configured:

Trigger Configuration, Content Configuration, Overlay Configuration and Popup Configuration. a. Trigger Configuration. This is where we will set up the Popup Trigger type, i.e. Button, Image or Link.

• Button setup.

• Link setup.

• Image Setup. For the image trigger we have to select the image as well.

• Image selection (this is the image we added to the Site contents).

. Select site. . Select Site Assets. . Select the image and click on Open. b. Content Configuration. This configures how the popup trigger displays as well as the source of the popup. The popup source must be set to Page URL and for the Page URL you must enter the iFrame URL you copied from the AI support agent setup at the start of this tutorial. c. Overlay Configuration. d. Popup Configuration.

• Position can be left right or center, left, right, top left, top center, top right, bottom left, bottom center or bottom right).

13. Click on Apply.

14. Click on Publish (or RePublish if you have Published the page before).

15. Your AI support agent button will now display on the page.

16. If you click on the button it will display your AI support agent dialogue. To close click on the X. You can also close it by pressing ESC if you have set it up in the configuration.

17. That’s it, your AI support agent is now added to your SharePoint website and your customers can start interacting with it!

---