Introducing ShortPoint Viva Engage Design Element

The Viva Engage ShortPoint Design Element allows you to embed a Viva Engage Home feed into your SharePoint pages. This gives users quick access to the app without opening the Viva Engage site.

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.

Here is a sample of what the Viva Engage Design Element looks like on a page:

Note
Take a look at the demo page we have set up for Viva Engage Design Element and see it in action

You can find the Viva Engage Design Element by either scrolling down to the Social category:

or by typing Viva Engage in the search bar:

Selecting the Viva Engage Design Element tile will open its Settings window allowing you to customize various options.

TABLE OF CONTENTS

• Prerequisites
• Customization Options
  • A. Content Tab
  • B. Design Tab
    • Settings
    • Size
  • C. Custom CSS

Prerequisites

• You have the latest ShortPoint SPFx version installed for your environment 
• You are a ShortPoint Designer with an active license

Customization Options

In the Settings window of the Viva Engage Design Element, you can see options that let you customize how you want the Viva Engage home feed to look on your page.

A. Content Tab

The Content tab of the Viva Enagge Design Element allows you to add a Custom Prompt to invite users to publish a post. If the field is left blank, the default prompt applied will be the phrase “What are you working on?”.

Note
The Viva Engage Design Element is designed to embed a home feed into a SharePoint page. If you wish to embed custom Viva Engage feeds, check out the article on How to Embed Viva Engage Feed to the SharePoint Page Using ShortPoint Code Design Element.

B. Design Tab

The Design tab allows you to customize the look of your Viva Engage home feed. It has the following options:

Settings

The customizations under this will help hide certain elements on the Viva Engage home feed. It has the following options:

• The Dark Theme option allows you to choose a high contrast, dark background color scheme for the embedded feed.

• Hide Network Name: Viva Engage Conversations will be displayed instead of the embedded feed Network Name.

• Hide Header: The header will be completely hidden, even if you have disabled the Hide Network Name option.

• Hide Footer: The bottom footer bar will not be displayed.

Size

The Width and Height fields determine the width and height of the Viva Engage Design Element in pixels respectively. Simply use the slider to set the value or type it in the input field on the right. Here are some key items to consider when determining the size of the embedded element: 

• the Width and Height must have a minimum value of 400 pixels. This is why the default values are set to 400 pixels the first time the Settings window is opened.
• by default, the Viva Engage Design Element is responsive

Note
Viva Engage only allows one embedded Design Element to be included into one page and the Design Element is not officially supported by mobile browsers, so please take that into  consideration.

C. Custom CSS

The Custom CSS tab allows you to use your own CSS, HTML, and Javascript code to customize the Viva Engage Design Element. 

Note
The Visibility tab is currently not available in Live Mode. You can switch to Grid Mode to enable this feature.

We hope this article has been helpful for introducing you to the Viva Engage Design Element and showing you how easy it is to use. Happy embedding!

Related articles: 

• Cannot add multiple ShortPoint Viva Engage Feed Elements into the Same Page
• Embed a Viva Engage Feed Into your SharePoint Classic and Modern Pages
• How to Add Viva Engage Feed Using ShortPoint Code Design Element
• Introducing ShortPoint Facebook Design Element
• Introducing ShortPoint Instagram Design Element