About the Dynamic Mosaic

The Dynamic Mosaic Widget displays visual content and text in a responsive and dynamic masonry layout. Users declare the importance of each story by assigning one of various sizes to each item; all items are then automatically arranged for best fit. Users can select from any application type (as well as their associated groups) to dynamically populate mosaic stories. The Dynamic Mosaic widget has different style options and customizable features to best match your community’s visual identity and brand. 

Open

Configure the Dynamic Mosaic

While configuring the widget, DO NOT click off the white popup box or you will lose your configurations and will need to click the gear to edit and start again.

Configuring Dynamic Mosaic Stories

Stories are the main components of your Mosaic widget. Stories are the items you want to highlight on your landing page with images, copy and links. The Mosaic widget offers a variety of options for displaying your stories and calls to action in your community. Every story can have a unique layout and configuration options. Below is a quick overview of what a story is and the main components involved. 

Open

Elements of a Story

• Categories. Call out specific types of stories with pre-set categories. Categories may include an icon (examples: video, announcement, HR update, Urgent etc.). Categories will display either in a bubble or bar view - depending on what mosaic story style is selected.

• Likes & Comments.  For Verint content, display social data by showing the  current number of likes & comments 

• Title and Subtitle.  Introduce your story & provide context for your users. 

Dynamic Story Configuration

Dynamic Story Configuration Menu

1. Click Add

2. Select your Style. Choose from Fade, Classic or Flat. See “Mosaic Styles” below for descriptions of each.

3. Select your image size. Choose from the following sizes:

   • Small

   • Tall

   • Wide

   • Large

4. Select your category if desired

5. Select your color if desired

   • Note: Story color is only displayed if you are using Flat or Classic styles.

   • Note: The text color for fade stories will default to white - regardless of what theme is applied to that story.

6. Choose to Enable Preview for your Mosaic Story - This enables a front end rollover/ hover preview for users on a story (see image below)

   • NOTE: This preview feature is only available for Dynamic content or Verint Community Content story types - NOT MANUAL ENTRY 

   • NOTE: The preview feature in single column will get stuck if you move off of mosaic window

7. Set if the story (once clicked on by a user) should open in a new browser window or an existing window. 

8. Select where the dynamic content should come from (either select by group → and applications or a specific application) (See notes below image)

• Select Dynamic Selection  

• Then Select if You Want to Search/ Surface Content by Group or Application

  1. Group = Latest/ Second Most Recent/ Third Most Recently Created Content Out of the Group (Based on Whatever Application Types are Enabled) 

     1. With the group selection, you search for and select the group where you want to show content from. Then you can limit it to one, two, or more application types to look at. It will show the most recent piece of content out of all application types selected within a group. 

  2. Application = Latest/ Second Most Recent/ Third Most Recently Created Post from the Selected Application(s)

     1. With the application selection, you search for and select an application you want to show content from. 

• Select Content: 

  1. Recent Content = The most recently posted piece of content

  2. 2nd Recent Content = The second most recently posted piece of content

  3. 3rd Recent Content = The third most recently posted piece of content 

9. Set a system title - this is what will display within the widget configuration. This way it is clear as to what story you will be moving, editing or deleting. 

10. Override “Story Title”  - Select this option if you would like to override the title of the piece of content being showcased in the dynamic mosaic story. 

    • I.e. if you are pulling in latest blogs, the blog post may be called CEO’s March Letter to Employees and this is a blog updated every month. You may want to have a title like CEO Letter of the Month

11. Select if you are enabling a story description for your dynamic story - by default dynamic stories do not provide any sotry descriptions - please enable and add a description if you would like one. 

12. Select if you are overriding the dynamic story image - by default for dynamic stories - blogs are the only content type that pull in an image from the content and set it as the mosaic story image. Overriding an image allows you to set an image for your dynamic mosaic story. If you choose to override the story image - please include a URL with that image. 

13. Click Save Story

Save All now before moving on to the next section. Scroll to the bottom of the widget and click the Save All button.

Story Configuration

Story Configuration Menu

1. Click Add

2. Name your Story

3. Select your Style. Choose from Fade, Classic or Flat. See “Mosaic Styles” below for descriptions of each.

4. Select your image size. Choose from the following sizes:

   • Small

   • Tall

   • Wide

   • Large

5. Select your category if desired

6. Select your color if desired

   • Note: Story color is only displayed if you are using Flat or Classic styles.

7. Add the link for your story

   • Select Verint Content to search for content within your community. If you select this option the configuration options to include “Likes” and “Comments” will appear below

   • Manually add a url if using a link external to your  community, or you are linking to Verint urls that do not include images

   • Check the box if you want the url to open in a new window

8. Enter your Title

9. Enter your Subtitle

10. Paste your Image URL if desired

    • If you chose to link to Verint Content in the link section above, the image will automatically pull from the image used in that content.  To override this (and select a new image) click the Auto button and paste in the url of the desired image.

    • Note: You must use an image address - this can be found by right clicking on your desired image and clicking copy image address

    • Note: If you do not select an image for the story, choose the Flat style to have your copy displayed over your background Color

11. Click Save Story

Save All now before moving on to the next section. Scroll to the bottom of the widget and click the Save All button.

You are not required to save after editing each section, but we recommend you do to avoid accidentally closing the configuration panel without saving. You can click Cancel to cancel all your changes and leave the configuration panel.

Mosaic Story Styles

Fade

• A smooth, shaded overlay is added over the bottom of the image

• Category appears in a separate color and bar view, as defined in palette

• White text is displayed on the faded darkened area, and the opacity can be adjusted in Settings

• No color

Fade Style Example

Classic

• A solid color block is overlaid at the bottom of image

• The color block opacity is configurable opacity under Settings

• Color is configurable

• Category appears in a bar view and separate color, as defined in palette

Classic Style Example

Flat

• No image displayed

• Background of story is solid color, as defined in palette and specified in story settings

• Category appears in a bubble shadow

Flat Style Example

• NOTE: When using a flat style and a manual entry, text will automatically be displayed in the top left of the box:

Otherwise when using the flat style and automatically linking to a piece of content within your community it will center the text and push it towards the bottom:

Configure the Theme 

Color Theme Configuration Menu

1. Click Add Color Theme

2. Name your Theme

3. Set Story Color 

   • If you are using the Flat style and do not add an image to your story this color will display as the background of that story. 

   • Note: Fade Style does not use the colors from your theme 

   • Note: If you don’t know the hexadecimal value, convert your colors at http://rgb.to

4. Set your Title/subtitle color

   • Note: Choose a color that will display on top of the Story Color set above. 

5. Set your Category band Color

   • this is the color that will be behind the Category text/icon

6. Set your Category text Color

   • Note: this will also be the Color of the category icon if used. 

7. Save your changes. Scroll to the bottom of the widget and click the Save All button. 

*Repeat the steps above to add multiple Color themes.  We recommend setting your color themes when you first set up your Mosaic, this way you can simply select from the available themes when creating your stories. 

Configure the Categories

Category Configuration Menu

1. Click Add Category 

2. Name your Category 

3. Set Icons

   • Preset icons

     • Type in the icon name 

     • Click to see the icon guide if you want to browse all preset icons:Find Icons with the Perfect Look & Feel | Font Awesome

     • A preview of your selected icon will appear below

     • Note: the color of the icon will be same color that was set in the Colors section.

   • Custom icons

     • Paste the icon url into the field for any icons you have uploaded to your community

     • Note: You must use an image address - this can be found by right clicking on your desired image and clicking copy image address

   • SVG

     • Paste in full SVG document. 

4. Save your changes. Scroll to the bottom of the widget and click the Save All button. 

*Repeat the steps above to add multiple categories.  We recommend setting your categories when you first set up your Mosaic, this way you can simply select from the available categories when creating your stories. 

NOTE: Categories on flat stories display as a bubble view whereas categories on fade and classic stories display in a bar view.

Configure HTML

1. Adding a custom Header and/or Footer: This feature allows you to add custom code (e.g. a block of links, or an image) above the widget and below the widget. It supports the use of javascript as well as use of {name}  (e.g., if you want your header to say something like Welcome {name} ).

2. Select Add Custom HTML from the widget menu. 

3. You can also lightly modify the appearance of the footer beneath the widget’s search results using HTML and CSS.

4.  Save your changes. Scroll to the bottom of the widget and click the Save All button. 

Adding Images in Verint

1. To add images to your widget, you will first need to upload them to the community.

2. Hover over the Pencil

3. Select Administration

4. Select Site > Files

5. Upload Images from your computer

6. Once complete, click the file name, the image will open in another browser window

7. Copy the address url for that image and paste it into a notepad, you will need these URLs when you are configuring the mosaic stories. (NOTE: This method is used when you are not using a piece of content that already has an image in it.)

Configure Fonts

1. Select Fonts from the widget menu.

2. Select a Font method from these options:

   • Basic

   • Google

   • Custom

   • Note: Default is “relative sizing” We recommend setting up a widget as a template with the desired settings, colors, etc. so that you can copy that configuration if you plan to reuse the across the community or share with your community management (place owners) team.

Font selection

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

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.

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.

Depending on what widget you are configuring there may be different sections for setting your fonts such as: title, heading, sub-heading, tabs, category etc.

When you are finished setting your fonts, save your changes. Scroll to the bottom of the widget and click the Save All button.

Configure the Advanced Settings

Advanced Settings Configuration Menu (default selections displayed)

Set your Column Count. The column count is the number of small widgets that can span the full width of Mosaic.

Set your Height. The height is equal to the height of a small widget. The height of the taller widget is calculated as a multiple of the small widget.

Example sizing calculations

Set your Hover effect

• Focus (default): When you mouse over one story, it will remain in focus while the other stories in the widget will go out of focus

• Shadow: When you mouse over one story, a faint shadow around that story will appear

• Opaque: When you mouse over a story, the opaque color under the story caption will change 

Details on the Hover Effect Rules:

(Acceptable range: the value that the user can specify in the configuration using the slider)

Set Rounded corners.  To give your stories rounded corners, simply set the border radius from the options in the drop down: 

• None (will not have rounded corners)

• Small

• Medium 

• Large

Set Gutter. The gutter is the gap between the stories. If you set this to “0” the stories will be flush against each other.  

Font Smoothing. This is an advanced setting that smooths type at the pixel level. Text may appear thinner on some browsers.

Set Caption Opacity. Set the opacity on the caption background for your stories by dragging the slider to the desired opacity percentage. 

• Note: You can set this for the Classic and Fade styles only

Set Margins. Set extra padding between the Mosaic and other widget if desired.

• Save your changes. Scroll to the bottom of the widget and click the

Set CSS Class Name. This class name is applied to the wrapper for the content, enabling targeting from custom CSS rules.

Save All button.

Publish the Page

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

Support

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

contact@socialedgeconsulting.com