About the Hero by SE Widget

With Hero by Social Edge, 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 by Social Edge 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.  Theme 

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

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

• Choose Mode - Select between bubbles (circles) and rectangles. This will affect the shape of the image. These circles can be configured to be behind or in front of the image (as mentioned above) and rectangles by default are behind the image. 

• Title Text Color - Enter or select a color value to be used at the title text color within the hero. To find specific colors use this link: Color Hex Color Codes

• Paragraph Text Color - Enter or select a color value to be used at the paragraph text color within the hero - this is displayed below the title. To find specific colors use this link: Color Hex Color Codes

• CTA Border Radius  - If this is set at 0 your CTAs will be rectangular in shape. Please use the roundness scales for each independent button to add roundness to the buttons. 

• CTA Box Color (1-3) - Enter or select a color value to be used at the CTA box color within the hero. Please do so for up to the three CTAs (or however many CTAs you have linked). To find specific colors use this link: Color Hex Color Codes

• CTA Text Color (1-3) - Enter or select a color value to be used at the CTA text color within the hero. Please do so for up to the three CTAs (or however many CTAs you have linked).  To find specific colors use this link: Color Hex Color Codes

• Image Box Roundness - If you select rectangles for the mode option this option will be presented. Please select between large, medium, small, or none. 

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

• Large Shape Roundness - If you select rectangles for the mode option this option will be presented. Please select between large, medium, small, or none. This affects the larger shape within the hero widget. 

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

• Image Box Height - Regardless if you select bubbles or rectangles for the mode please use this slider to set the maximum image box height you would like (in pixels).

• Image Box Width - Regardless if you select bubbles or rectangles for the mode please use this slider to set the maximum image box width you would like (in pixels).

• Small Shape Roundness - If you select rectangles for the mode option this option will be presented. Please select between large, medium, small, or none. This affects the smaller shape within the hero widget.

d. Fonts

For the hero by SE widget 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 text of the call-to-action 

4. Select ​Fonts​ from the Widget menu.

5. 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”

e. 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 the widget includes the top border and header). 

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