This article explains how to embed the Zendesk 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 Zendesk 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
Whether you opt to develop a new extension or decide to utilize an existing one, be sure to package the extension correctly.
- 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.
- 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
- Access your SharePoint admin center. This can be done by appending /admin to your SharePoint site URL.
- 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
- On your SharePoint site, navigate to the Site settings page.
- On the Site Settings page, click the gear icon, then click Add an
app.
- 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
- Open the SharePoint page to which you want to emded the Web Widget.
- Click Edit.
- Click the web part section at the top of the page, then select the extension you added.
- Click Edit markup, then click Edit HTML Code.
- In the script editor, add your widget script as shown:
For more information about generating the widget script, see Adding the Zendesk 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
2 comments
Testing
Hi. There is a way to know the status of the chat using zE Api (If twe are out of business hours scheduled?
https://developer.zendesk.com/api-reference/widget-messaging/introduction/
0
Destiny
With the Web Widget API, you can utilize the
chat:departments
API to know the operating hours of a department. This method returns an array of the active departments for the account. Each department object includes properties likestatus
, which indicates whether the department is within operating hours (online
) or not (offline
).Here's an example:
However, there doesn't seem to be a direct method to get the account-wide operating hours. That's typically set on a per-department basis.
You can also check the status of the chat using
zE('webWidget:get', 'chat:status')
, but this may not reflect the business hours, rather it would demonstrate the status of the actual chat (e.g., connecting, connected, closed).You can find more information about the API here https://developer.zendesk.com/api-reference/widget/settings/#departments
0