How To Configure Slider

Owned by Sara Collins
Last updated: Oct 21, 2024
8 min read

About Slider 

 

Display up to six different slides along with four call-to-action flipping boxes each containing unique links. 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. 

 

Slider Product Overview Image

 

Key Features:

  • Can display up to four different flipping boxes with links

  • Can display general text in addition to calls-to-action buttons and the flipping boxes

  • Have the ability to display up to six unique and different slides

 

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. 

  • Slide Rounded Corners - Determine if you want the background to have rounded corners (all slide backgrounds) - select from none, small, medium or large.

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

  • Static Button Text - 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. 

  • Static Button Text Link - 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 Radius - Select if you would like the static button (that appears on all slides) to have rounded corners - select from none, small, medium or large.Example of static button with rounded corners: 

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. 

  • FlipCard Box Image - 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: 

  • Flipcard (Call to Action) Radius - Select if you want the specific call to action (flipping box) to have rounded corners - select from none, small, medium, or large. Example of rounded corners: 

  • Flipcard Title - Refers to the title at the top of the call-to-action as pictured below. 

 

  • Flipcard 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. 

  • Open In New Window: Enable if you would like the link to open in a new window when a user clicks on the link.

  • Also choose a border color for the calls-to-actions. This is pictured below: 

  • Flipcard 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 Alignment: Select if you want the title to be left, center or right-aligned. 

 

 

 

 

 

  • Subtitle - This corresponds to the subtitle that will appear below the title in a slide.

  • Subtitle Alignment - Select if you want the subtitle to be left, center or right-aligned. 

 

 

 

 

  • Button Text - What text displays in the button on the slide (this is not required) (see image below)

  • Button Text Link - What link do you want to open for a user when they click on the button (see image below)

  • Button Text Radius -  Determine if you want the button on the slide to be rounded - select from none, small, medium or large. Example of slide button with rounded corners: 

  • Open in New Window - Set if the link should open in a new window once the user clicks on it.

 

 

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. 

  • Open in New Window - Set if the link should open in a new window once the user clicks on the background image of the slide.

 

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

  1. Click the Publish Button in the Management Console Panel to publish your changes



  2. Click the X in the Management Console Panel, to close the Panel



  3. Your page will appear published with your updates

 

Support

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

contact@socialedgeconsulting.com