v1.4.0 - How to Configure Slider Widget
- 1 About the Slider Widget by SE
- 2 Setup and Configuration
- 2.1 Add the Widget
- 2.2 Configuring the Widget
- 2.2.1 Options Tab
- 2.2.2 CTA Tab (Flip Cards)
- 2.2.3 Slides Tab
- 2.2.4 Migration Tab
- 3 Publish the Page
- 4 Support
About the Slider Widget by SE
Display up to six different slides along with four Call-to-actions flipping boxes (flip cards) with links within each one. Each slide can be customized along with each CTA flipping box. Have the ability to set a color theme for the CTA’s to match with a brand theme. The overall clean and modern look provides a nice touch to any landing page or space where you would like to highlight important content as well as quickly direct users where they would want to go.
Setup and Configuration
Add the Widget
The Slider Widget 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
Search for the Slider Widget by SE
Hold down the mouse on the widget name and drag it out onto the page where you want to display it
Configuring the Widget
Now that you are in the configuration panel of the Slider Widget by SE 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.
NOTE: 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.
Options Tab
Widget Height - Enter a numerical value (represented in pixels) to be set as the overall Slider widget height.
Animation Interval - Refers to how long one slide is shown.
Animation Time - Refers to how long it takes to switch between two slides.
Autoplay Timeout - Refers to how long it takes when a user is looking in a different tab. At that second mark the autoplay will timeout and not work when that individual returns back to the page.
Name of the Button - Refers to the static button in the top right corner of the widget.
NOTE: This button will not appear unless you enter a link for it.
Link (Static Button) - Refers to where you will be brought if you click on the button in the top right corner of the widget. As pictured below:
Static Button Text Color - Enter or select a color value to be set as the static button text color.
Static Button Background Color - Enter or select a color value to be set as the static button background color.
Static Button Text Hover Color - Enter or select a color value to be set as the static button text color when that button is hovered over by a user.
Static Button Background Hover Color - Enter or select a color value to be set as the static button background color when that button is hovered over by a user.
Custom Font - Upload a local WOFF file for a custom font from your local instance to be applied to all text items within the slider widget. Please see here for free WOFF downloads: https://www.fontspace.com/popular/fonts
CTA Tab (Flip Cards)
Pick CTA for Edit - Add up to 4 different Calls-to-Actions. To edit each one separately use the drop-down menu and click on the Call-to-Action (CTA) that you would like to edit.
Icon - You can either upload an icon from your local instance or link to an image in this field. Refers to the image that is within the call-to-action above the title, as pictured below:
Title - Refers to the title at the top of the call-to-action as pictured below.
Subtitle - Refers to the text within the call-to-action (without being flipped) that is below the title. As pictured below:
Flipcard Text & Link -
THIS IS REQUIRED IF AND ONLY IF YOU ARE USING THE FLIPCARDS.
This is where you enter in all of the navigation items you would like listed on the back of the flipcard with their corresponding target. Also choose a border color for the calls-to-actions. This is pictured below:
Border Color - Select or enter a color value to be applied as the border color on the flip cards (as pictured above).
Slides Tab
Pick Slide to Edit - Add up to 6 different slides. To edit each one separately use the drop-down menu and click on the slide that you would like to edit.
Image - Set an image for each slide using this image field. To do so you can either upload a media item from your local instance or you can enter a link to a media item. If it is an external image please just copy and paste it into the text field.
Title - This corresponds to the title that will appear in larger text at the top of the slide.
Title Font Size - Set the font size in pixels for the title text in the slide
Title Font Size Recommendations:
Widget Type | Font Size Recommendation |
Full Page Width Column | Can Use Any Available Size With a Shorter Title (<5 Words)l
For a Longer Title, It Is Recommended To Use No Larger Than 26 Pixels |
Half Page Column | Do Not Use Any Size Larger Than 32 Pixels
**If you also have a subtitle - do not exceed 26 pixels |
Narrow Column (⅓ of Page Space) | Do Not Use Any Size Larger Than 20 Pixels
**If you also have a subtitle - do not exceed 18 pixels |
Mobile | Do Not Use Any Size Larger Than 20 Pixels
**If you also have a subtitle - do not exceed 18 pixels |
Subtitle - This corresponds to the subtitle that will appear below the title in a slide.
Subtitle Font Size - Set the font size in pixels for the subtitle text in the slide
Subtitle Font Size Recommendations:
Widget Type | Font Size Recommendation |
Full Page Width Column | Can Use Any Available Size With a Shorter Subtiitle (<6 Words)l
For a Longer Subtitle, It Is Recommended To Use No Larger Than 24 Pixels |
Half Page Column | Do Not Use Any Size Larger Than 32 Pixels |
Narrow Column (⅓ of Page Space) | Do not Use Any Size Larger Than 24 Pixels |
Mobile | Do not Use Any Size Larger Than 24 Pixels |
Text Link - This corresponds to the button that is on the slide (Read more)
Text Font Size - Set the font size in pixels for the text in the button on each slide
Text Font Size Recommendations:
Widget Type | Font Size Recommendation |
Full Page Width Column | Do Not Use Larger Than 16 Pixels |
Half Page Column | Do Not Use Larger Than 16 Pixels |
Narrow Column (⅓ of Page Space) | Do Not Use Larger Than 16 Pixels |
Mobile | Do Not Use Larger Than 16 Pixels |
Link - This link corresponds to the linked button (Read more as pictured above). This is where you will be brought if you click on the read more button.
NOTE: You do not need to have a button on every slide.
Image Link - Please enter a URL here if you would like your image within the slide to be linked somewhere (you can also enable if you would like that link to open in a new window or not). This field is not required. If you enter no link - the image within the slide will not link anywhere.
Migration Tab
To generate a copy of your current Slider configuration, click on the migration tab. Then under Export Configuration click the button that says “Generate Configuration”. Once the text field is populated with the configuration code click the copy button. Please store that code in a safe location for future reference.
If you would like to import a previously configured Slider and you have that configuration code handy, you can paste the code into the text field below Import Configuration. Once the code is properly imported and displayed in the text field, click apply. Once you click apply you can navigate to the other tabs within the widget configuration and make any needed changes and then click Save. Otherwise, if no changes need to be made, simply import and apply the configuration code and then click Save.
Publish the Page
Click the Publish Button in the Management Console Panel to publish your changes
Click the X in the Management Console Panel, to close the Panel
Your page will appear published with your updates
Support
Need support or want to talk to us? Please send an email to: