On this page

About the Place Grid Widget

Looking for a stylish way to display a grid-based navigation menu in your Verint community? 

Highlight your key places with a clean and compelling grid view. This widget pulls in any spaces or subspaces you choose - automatically or manually. The table-like layout helps structure your landing pages by optimizing available space.

Open

Key Features: 

1. Can fully customize filters 

2. Can fully customize where boxes are being linked to 

3. Can display boxes with links to places with either images or words and colors

4. Can add customized text above the place grid using HTML/ CSS

Setup and Configuration

1. Add the Widget

The Place Grid 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 Place Grid Widget 

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

1. Open the widget configuration

2. Click save

3. Publish the Page

4. Reload the Page

5. Go back into the widget confirmation

Finding the Container Identifier (Used for Automatic Setup)

1. Click on the pencil icon

2. Click Manage Group

3. Select Group options

4. Select View Identifiers

5. Copy the container identifier somewhere that you can access it later

Configuring the Widget 

Before You Start 

Now that you are in the configuration panel of the Place Grid 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. 

Places 

Automatically 

Select Automatic 

NOTE: Verint does not allow to add tags to the group

As you know the groups in Verint do not have tags. We recommend to create a technical table with “Tags of groups(Technical)” name and “place_grid_tags” tag to add/store a group’s tag.

The place grid widget uses that table to get information about the group’s tag:

Select the green +URL

Set the +URL Options for Automatic Configuration. Add a Title and the Container Identifier.

NOTE: If there is a link to a piece of content, an application, or a group title with ‘ or ‘ in it - it will break the Place Grid widget configuration (Known bug by Social Edge & Being Addressed).

Once you have entered the container identifier click Add.

Find the Identifier under the Group Options of the Management console in each group. Scroll to the bottom of the panel and click View Identifiers. You can use either number.

Click the add button to save the automatic +URL options 

Manually

Select Manual.

Select the green +URL link.

1. Fill all fields: title, link, and tags.

   1. The tabs will be set in the filters section of the configuration. 

   2. NOTE: If there is a link to a piece of content, an application, or a group title with ‘ or ‘ in it - it will break the Place Grid widget configuration (Known bug by Social Edge & Being Addressed).

2. By default, the option to open in a new window is checked

3. Select the green Add button

b. Box Content 

1. Select Box Content to set the view setting of the box.

2. Choose what you want to appear in each box

   • Place Image: to inherit the image associated with the place

   • Custom Image: to select your own image if using Manual mode

   • Place Name:  to display on the place name and no image

3. Choose if /where you want the place name to be displayed (No, Beneath, or Hover)

c.  Filters 

1. Select the New Filter button.

2. Label the Filter heading - this is what is applied and can be viewed for each filter. Filters Ex: 

3. Select the +ADD PLACE TAG link

4. Add the Place Tags title to the first row with the placeholder “Display name”

** The Display Name is What is Shown Under Each Filter: 

**This is what the default selected filter looks like for users on the front end: 

Each filter has the option for a default selected value (you can have multiple pre-selected filters) - this value is automatically filtered on a page load for the front end user. Users always have the choice to reset the filters. 

5. Add the name of the tag to the second row with placeholder “Associated place tag”

   1. The Associated Place Tag is Used To Connect the Defined Places (Boxes). I.e. Direct Marketing - the associated place tag is dm. Anything tagged with dm will show once that filter is selected. Example: 

2. or leave it blank if you want to use tags from the table (for automatic setup)

NOTE: When multiple filters are selected on the front end by a user - the search behavior is AND. I.e. if a user selects these two filters: Direct Marketing and Education - the items that would show up would have to be associated with the Direct Marketing and Education tag/ filter. 

NOTE: Users have the ability to reset any selected filters

3. Select the Save Filter button

d. Theme

1. Select Themes to 

2. Input your desired selections

Set your Theme Settings

Set your Filter Theme Settings

Set your Place Box Theme Settings

Set your Advanced Theme Settings

• Gutter - The amount of spacing that you want between each of the links (boxes) in the place grid

• Padding - Insert a desired padding (in pixels) within a box (link) 

• Class Name - Insert any CSS class names that you would like to apply to the Place Grid

• Max Items on Initial Load - How many items (links) do you want to load when a user first lands on the page. 

• Widget Title - Set the Widget TItle to Display Above the Place Grid

e.  Fonts

For the Place Grid widget you will choose the Fonts for each of the main text options: 

1. Place Name - Will affect the font of Place Grid Box content 

2. Filters - Will affect the font of the filters/ filter options of the place grid

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” 

f. Add header 

1. Select Add Header to add css and html to the header of the place grid

2. Input your desired selections

g. Migrate Configuration 

1. Under Migrate configuration go under the COPY CURRENT CONFIG 

2. Click copy to clipboard

3. Store this code somewhere safe 

To Migrate the Configuration 

1. Navigate back into the configuration of the place grid widget 

2. Under Migrate Configuration make sure you are on the ADD NEW CONFIG tab

3. Paste the code you have kept in a safe place into the text box

4. Click Apply

5. Then click Save all 

Publish the Page

1. Navigate to the advanced settings within the widget configuration 

2. Press save all 

3. 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