Try ShortPoint nowWhen embedding Viva Engage to your SharePoint page using the dedicated ShortPoint Design Element, you will successfully display the current user’s Home feed. However, Viva Engage has a feature that allows you to create and customize feeds that can be embedded in your site pages.
In this article, we will demonstrate how you can embed custom feeds in your SharePoint sites using ShortPoint Code Design Element. We divided the steps into two parts.
Note Microsoft Viva Engage was formerly known as Yammer. In the same manner, the ShortPoint Viva Engage Design Element is an update to the Yammer Design Element.
TABLE OF CONTENTS
- Prerequisites
- Before we begin
- Part 1: Prepare Viva Engage embed code
- Part 2: Add the Yammer widget to your SharePoint page
Prerequisites
- You have the latest ShortPoint SPFx version installed for your environment.
- You are a ShortPoint Designer with an active license.
Before we begin
- To learn how to use ShortPoint Code Design Element, you may check our article Introducing ShortPoint Code Design Element.
- You must also have access to the Viva Engage widget configuration site.
Part 1: Prepare Viva Engage embed code
Here are the steps you need to follow to create and retrieve a Viva Engage embed code.
Step 1: Go to the Viva Engage widget configuration site
- Open the widget configuration site on your browser.
Step 2: Select the feed type option
- Select the type of feed you want to present on your site.
| Feed type | Description |
|---|---|
| Home feed | This is the feed that the ShortPoint Viva Engage Design Element embeds on your page. Alternatively, generating an embed code here is an option that you can use. |
| Community feed | The feed for one community (group) in Viva Engage. The Search for the source field will require you to select a community from the dropdown. |
| User feed | All conversations that include messages from the specified user. The Search for the source field will require you to select a user from the dropdown. |
| Topic feed | All conversations that are tagged with one topic. The Search for the source field will require you to select a topic from the dropdown. |
| Web link feed | All conversations from a web URL. You will be required to Enter the source URL. |
Note To get more information about the differences between the Viva Enagge feed options, check out Add a Viva Engage feed to a SharePoint page.
Step 3: Configure Viva Engage widget appearance
- Customize how the feed will appear on your page. Choose to hide features or use dark mode.
| Option | Description |
|---|---|
| Show header | This allows you to show or remove your network name at the top of the widget. |
| Show network name in header | This allows you to keep your network name at the top of the widget or replace it with Viva Engage Conversations. This option disappears when you choose to remove the header. |
| Include community information at top of feed (available only in the Community feed option) | This allows you to show the selected community name and its description or remove it from the feed. |
| Show footer | This allows you to show or remove the footer information at the bottom of the widget. |
| Dark mode | This allows you to display your widget in dark mode. |
Step 4: Get the embed code
- Once you are satisfied with how your widget looks, you can click the Get code button. A pop-up window will provide you with the embed code needed for the next step.
- Hit Copy to save it to your clipboard.
Part 2: Add the Yammer widget to your SharePoint page
Now that you have the embed code, you can proceed to inserting the widget into your SharePoint page using the Code Design Element.
Step 1: Insert the Code Design Element
- Edit the SharePoint page where you want to embed your Viva Engage widget.
- Select the ShortPoint web part and enter edit mode by clicking the pencil icon.
- The Code Design Element is currently only available in Grid Mode. Hit Switch to Grid Mode in the Action Toolbar.
- In the space where you want to add your Viva Engage widget, click the plus icon. This will open the Page Builder window.
- Scroll down or search for the Code Design Element and select it. It will be inserted and its settings window will appear.
Step 2: Add the Viva engage embed code
- Paste the copied embed code into the HTML field.
- You can view how the widget will look like in the Preview section.
- (Optional) You can configure the height and width configurations in the embed code. If you do this, please remember to scroll down and disable Sandbox Mode.
- Hit Insert to apply your changes.
Step 3: Save and publish your page
- You can click the Preview icon on the Action Toolbar to check how the added widget displays on the page.
- Click Save to ensure your edits are retained.
- Hit Republish when you are ready for your users to see your updates.
That is it! You now know how to embed other Viva Engage feed types into your SharePoint page.
Related articles:
- How to embed a Modern SharePoint List Calendar (Month) View Using ShortPoint Code Design Element
- Example Use Cases for ShortPoint Code Design Element: Part 1
- How to Execute JavaScript Inside the Code Design Element that Depends on Loading External JavaScript Assets
- Introducing Shortpoint Viva Engage Design Element
- Introducing ShortPoint Code Design Element
