On this page:

About Hero

With Hero, you can configure a larger-sized banner to display an image (with shapes behind it if wanted), general text, a title, and three call-to-actions. This is a great way to inform users why they may be on a certain page and provide them with important links within a space. This is helpful if you have a landing page and need to provide users with a blurb on why they are in a certain space as well as the quick links they would most likely need in that space. 

Open

Key Features: 

1. Can display up to three different calls-to-actions 

2. Can display general text in addition to calls-to-action buttons 

3. Images and shapes can be either bubble or square-shaped

4. Can customize the color theme of the widget 

Setup and Configuration

Add the Widget

The Hero Widget requires one place in Verint to set up:

Add a new widget to the page 

• Navigate to the group, space or project

• Click on the pencil icon ()> Manage group theme > edit this page 

Open

• Search for the Hero by SE Widget 

• Hold down the mouse on the widget name and drag it out onto the page where you want to display it 

Configuring the Widget (Generating a New Hero by Social Edge)

Before You Start 

Now that you are in the configuration panel of the Hero by Social Edge Widget you need to navigate to the configuration of the widget. To do so navigate to the widget you want (edit the page) and click on the cog in the corner of the widget. 

Below are the settings we recommend you configure ​first​: 

• Hero - set your image for the hero widget, your title, and the paragraph field that is displayed under the title

• CTAs - define labels of the call-to-actions as well as the links associated with them

• Theme​ - set your brand colors for use on the widget

• Fonts​ - set the font for the title, paragraph field, and the text on the call-to-actions

• Advanced Settings - set the widget title as well as add any CSS class for the widget (ex: borderless - makes the widget borderless)

Setting these first will make it easy for you to quickly add the elements to your stories. See the sections below for details as well as images on each configurable section of the Hero by SE Widget.

a. Hero

• Hero Image Field - The image that is displayed within the hero by SE widget 

• Hero Title Field - The title displayed within the hero by SE widget 

• Hero Paragraph Field - The text that is displayed within the hero by SE widget (Recommended max of 300 characters). 

b. CTAs

• Add up to three calls-to-action 

  • The first call to action (CTA 1) is the CTA displayed the furthest to the left within the hero by SE widget 

  • The rest of the CTAs follow in order from left to right (CTA 1 > CTA 2 > CTA 3) 

c.  Color Theme 

Click THEME to add a color theme to use in multiple areas of the hero by SE widget. To find specific colors for title text color, paragraph text color, CTA 1 box color, CTA 2 box color, CTA 3 box color, CTA 1 text color, CTA 2 text color, CTA 3 text color, large shape color, and small shape color use this link: https://www.color-hex.com/

NOTE: Images for color theme are pictured on the next page 

• Inherit Theme - The colors are inherited from the server you are on. 

• Display Circles Behind an Image - Will display the the larger and smaller circle behind the image instead of infront of the image 

• Large Shape Color - Refers to the larger shape (in the pictures above the larger circle) 

• Small Shape Color - Refers to the smaller shape (in the pictures above the smaller circle)

d. Advanced Settings

The advanced settings section consists of the name for the widget title as well as an area to enter any CSS class. For example, we suggest borderless if you would like the widget to be completely borderless. The image of the widget below shows where the widget title will be displayed (will only be displayed if the format of widget includes top border and header). 

e.  Fonts

For the hero by SE you will choose the Fonts for each of the main text options that display in Stories:

1. Title - Will affect the font of the Hero Title Field

2. Paragraph - Will affect the font of the Hero Paragraph Field

3. CTA(s) - Will affect the font of the the text of the call-to-actions 

1. Select ​Fonts​ from the Widget menu.

2. Select a Font method from these options:

   1. Basic Font: Choose from the browser default fonts (serif, sans-serif, cursive, and monotype) and global web-safe fonts used in your Jive community. If you select a Basic font, you can also configure the script type (Bold, Italic, etc.).

   2. Google Font​: you can select a font from those provided by Google. Begin typing to search for a specific Google font. Browse and preview the Google Fonts database here: ​Google Fonts​.

   3. Custom Font:​ you can import your own custom font by supplying hosted links to your font files. For cross-browser compatibility, please specify at least a woff or TTF font file. Note: You are responsible for licensing and paying for that font. 

Note: Default is “relative sizing”

Widget Title: How - To Display & Publishing the Page 

1. Navigate to the advanced settings within the widget configuration 

2. Enter a title under widget title

3. Press save all 

4. Navigate and click on Format within the widget menu then select top border and header

5. Navigate back to the side menu (where the pencil icon is) and click Publish 

Display with widget title: 

Support

Need support or want to talk to us?  Please send an email to:

contact@socialedgeconsulting.com