How to Add a Viva Engage Feed to a SharePoint Page : ShortPoint Support

Learn how to embed Viva Engage Feeds using the ShortPoint Code Editor Web Part. Check out the quick walk-through or the step-by-step tutorial to get started.

Sample page with Viva Engage

TABLE OF CONTENTS

Prerequisite
Quick Walkthrough
Step-by-step Tutorial
Viva Engage Embed Features

Prerequisite

You must already have the ShortPoint Code Web Part installed on your SharePoint page. To learn how to do this, check out How to Install ShortPoint Code Editor in SharePoint.

Quick Walkthrough

1. Go to the widget configuration site on your browser, customize the Viva Engage feed, and get the code.

2. Open your SharePoint page and add the ShortPoint Code Web Part.

3. Click the Edit Properties icon of the ShortPoint Code to edit it.

4. Delete all default codes.

5. Paste the copied code in the HTML field, customize it to your needs, and click Save.

6. Close the ShortPoint Code window.

7. Republish the page.

Step-by-step Tutorial

The detailed guide below will demonstrate how to add a Viva Engage feed to your SharePoint page:

Step 1: Copy the Embed Code

Open the widget configuration site on your browser:

widget configuration site

Choose the type of feed to embed:

select feed type

NOTETo learn more about the types of feed you can embed, check out Viva Engage Embed Features.

Customize the look of the Viva Engage embed:

customize viva engage

NOTETo learn more about the customizations you can do, check out Viva Engage Embed Features.

Once satisfied with your edits, click Get Code:

Get Code

Step 2: Add the ShortPoint Code Web Part

Go to the SharePoint page where you want to embed the Viva Engage feed and click Edit:

Edit

Click the close icon to leave the Toolbox:

close icon

Select the plus icon to add a web part:

plus icon

Use the search bar to look for ShortPoint Code, or scroll down until you see the Advanced section. Click ShortPoint Code:

ShortPoint Code

Step 3: Edit the ShortPoint Code Web Part

Click the Edit Properties icon:

Edit properties icon

Step 4: Delete Default codes

Select each field, delete the default codes inside, and click Save:

delete default codes

Step 5: Paste the Code

Click the Edit HTML field:

Edit HTML field

Paste the code:

paste code

You can directly edit the code in the ShortPoint Code Editor. Customize the code according to your needs and click Save:

customize code

Step 6: Republish Page

Once satisfied, click the close icon to leave the ShortPoint Code window:

close icon

Click Republish once you’re ready to make your changes live:

Republish

Awesome! You've successfully embedded a Viva Engage feed into your SharePoint page.

Viva Engage Embed Features

Below are the options you can find to customize the Viva Engage feed:

Feed Types

	Home feed	showcases your home feed.
	Community feed	showcases conversations and posts from a specific community or a group in Viva Engage.
	User feed	showcases conversations and posts from a specific user.
	Topic feed	showcases conversations with a specific topic.
	Web link feed	showcases conversation from a specific web URL.

Stylistic Options

	Show header	when enabled, the network name will be shown.
	Show network name in header	this option will only appear if Show Header is enabled. When enabled, this allows you to keep your network name at the top of the widget.
	Show footer	when enabled, the footer will be shown at the bottom.
	Dark mode	when enabled, the feed will be displayed in dark mode
	Include community information at top of feed	this is only available for the Community Feed. When enabled, the name of the community will be shown at the top of the feed.
	Show web link preview	this is only available for Web Link Feed. When enabled, a link preview of the feed will be shown.