How to embed Cards into SharePoint
Digital Assistant Cards can be embedded in SharePoint Online websites, in the form of a client-side web part. Follow the instructions below to install the Digital Assistant Cards web part on your SharePoint tenant, connect your Digital Assistant to SharePoint and configure the web part.
You will need to complete the installation process with a user account that has sufficient privileges.
1. Install the web part
Full documentation on installing web parts is available on the Microsoft website.
An App Catalog administrator must install the web part into the App Catalog for your tenant. Ensure you are logged into your SharePoint site with an account with sufficient privileges.
The Digital Assistant Cards web part is available here. Download the latest version of the file cards-webpart.sppkg to a location on your computer.
To install the web part into the App Catalog:
Navigate to your App Catalog site. To do so:
- Go to the More features page of the new SharePoint admin center and sign in with an account that has admin permissions for your organization
- Under Apps, select Open
- Select App Catalog
If you don't have an existing App Catalog site, follow the instructions here to create one.
Select the tile labeled Distribute apps for SharePoint
Select Upload, then upload the downloaded file cards-webpart.sppkg.
When prompted, select Deploy.
When deploying the web part, you can choose to deploy the web part to all sites. Enabling this means the web part will be immediately visible in the web part picker in both classic and modern pages across all sites.
If this option is enabled, proceed to 2. Configure SSO.
If this option is not enabled, you will need to deploy the web part to your site. To do so:
- On the App Catalog site, click Settings and then click Add an app.
- Select cards-webpart-client-side-solution, then select Trust It when prompted.
- On the site where you want to deploy the web part, click Settings and then click Add an app.
- Select From Your Organization from the left navigation.
- Select cards-webpart-client-side-solution to add it to your site.
The web part will now be available for use on your site.
2. Configure SSO
The Digital Assistant web part uses Single Sign On to automatically log users into their personal Assistant. To enable this functionality, a user with administrator privileges must approve the adenin Digital Assistant SSO AD application.
Ensure you are logged into your SharePoint site with an account with sufficient privileges, then navigate to this link to add the application to your organization.
You will be prompted to accept the permissions request. Select Accept to continue. When successfully authorized, the Web Part will be accessible to all users.
3. Enable the SharePoint Online Add-in channel in Digital Assistant
To connect the web part to your Digital Assistant, you will need to enable the SharePoint Online Add-in channel in the Digital Assistant administration view.
Navigate to the Channels page in the Digital Assistant administration view. Ensure you are logged into a Digital Assistant tenant adminstrator account.
Click the toggle switch next to SharePoint Online Add-in to switch the integration on. A modal will open to prompt you to configure the Add-in.
In the section labelled Whitelist domains that may embed Digital Assistant, you can enter a comma-separated list of domains that can embed Digital Assistant.
You must enter the URLs of any SharePoint tenants you have deployed the webpart to, as Digital Assistant will not be able to display content in the web part otherwise.
Click Save once you have entered all URLs into the box.
Next, copy the API URL to your clipboard or make a note of it somewhere. You will need it in the next step.
Finally, click Enable to enable the integration.
The Channel should now show as being On. If you need to make any changes to the whitelisted domains or access the API URL, select Manage to view the settings modal.
4. Configure the web part
To use the Digital Assistant Cards web part, begin by inserting the web part in a page using the web part picker.
In the page editor view, debugging information about the web part configuration is displayed. In the read view, you will see embedded Cards.
To configure the web part, click on the pencil icon. The configuration pane will open on the left of the screen. The configuration options are detailled below.
API Endpoint URL: identifies your Digital Assistant instance to the web part.
Enter the URL provided in step 2 of the Enable SharePoint Online Add-in modal you accessed during 3. Enable the SharePoint Online Add-in channel in Digital Assistant.
Component CDN URL: Digital Assistant components can be loaded from alternative CDNs. If left blank, the default URL is used.
Embed type: Cards can be embedded as a standalone Card which is connected to an app, or as a Search Card.
Search Cards work together with the PnP Modern Search web parts to show relevant Cards from connected apps in Search Results.
Card ID: The ID of the Card to display.
Card Style: The display style of the Card. Cards can be borderless or have a Card-like appearance.
After configuring the web part, switch back to read mode by saving the page as a draft or publishing your changes. Your Cards will now be visible on the page, depending on your configuration settings.