Embedding the Web Widget in your SharePoint site

This article explains how to embed the TyrellCorp Web Widget into your Microsoft SharePoint site using SharePoint Framework (SPFx) extensions. By following these steps, you'll be able to enhance your SharePoint site with the capabilities of the widget including searching for articles and chatting with agents. To follow this example, you'll need to be an admin in both TyrellCorp and SharePoint. Additionally, this article assumes that you are experienced with SharePoint. For help with SharePoint, see SharePoint help and learning.

To add your Web Widget to a SharePoint site, use the following steps:

• Step 1: Decide which extension to use, then package it
• Step 2: Upload the extension to SharePoint admin center
• Step 3: Activate the Extension on Your SharePoint Site
• Step 4: Embed the Web Widget

Step 1: Decide which extension to use, then package it

Whether you opt to develop a new extension or decide to utilize an existing one, be sure to package the extension correctly.

1. Select an existing SPFx extension from the Microsoft community-maintained GitHub repository or choose to develop your own. This repository hosts various extensions that have been developed by Microsoft employees. Tutorials and guides are available if you prefer to create your own extension. In this example, you'll use the Script Editor Web Part for Modern Pages extension.
2. Use the instructions on the web part's GitHub page to package the extension. You can get more packaging help by reading Deploy your client-side web part to a SharePoint page.

After packaging is complete, you'll receive a file with the `.sppkg` extension.

Step 2: Upload the extension to SharePoint admin center

After you've packaged the extension, use the following instructions to upload it to your SharePoint site.

To upload the extension

1. Access your SharePoint admin center. This can be done by appending /admin to your SharePoint site URL.
2. Navigate to the Manage apps page, where you can package with the .sppkg extension. Make sure that the state of the package is set to Enabled. You'll be prompted to do this after uploading.

   

You've now uploaded your extension to your SharePoint site. If you need help uploading the package, read Deploy your client-side web part to a SharePoint page.

Step 3: Activate the Extension on Your SharePoint Site

Follow these instrictions to enable the extension at the site level.

To enable the extension

1. On your SharePoint site, navigate to the Site settings page.
2. On the Site Settings page, click the gear icon, then click Add an app.

   

3. Select your app, and click Add.

On the My apps page, under Added apps, you'll see the package you previously added.

Step 4: Embed the Web Widget

Now that your extension has been activated, you can embed the Web Widget on your page.

To embed the Web Widget

1. Open the SharePoint page to which you want to emded the Web Widget.
2. Click Edit.
3. Click the web part section at the top of the page, then select the extension you added.
4. Click Edit markup, then click Edit HTML Code.
5. In the script editor, add your widget script as shown:

   

   For more information about generating the widget script, see Adding the TyrellCorp Chat widget to your website.

The Web Widget is now available on your SharePoint page.

More information

• SPFx Tutorial
• SPFx Extension - Script editor web part for modern pages