How to save the current slide ID of the carousel to a web browser cookie and navigate to the slide when the user returns to the page

Product:

Wonder Carousel

Question:

We are using Wonder Carousel with more than 50 text content frames to aid our users in a study program.

We would like to know if there is a way to automatically set a cookie at the most current frame so that when a user returns to the page (same device and browser, of course), the most recent frame will open. Right now, the user has to use the arrow to advance a few or may dozens of pages to get back to where they were in their prior session (if the user even remembers).

Answer:

In Wonder Carousel, go to Step 3 (Options tab), then the Movement Options tab. Check the option 'Save the current slide ID to a web browser cookie and navigate to the slide when the user returns to the page.' You can also specify the time in hours that the cookie will be remembered by the browser.

carousel-cookie

By using a macro variable, __SLIDECOPYLINK__, you can also display a 'Copy Link' button on the carousel. When the button is clicked, it will copy the URL of the current slide to the clipboard, allowing the user to share the URL, or save the URL and revisit the slide directly later.

Please note that the 'Copy link' button will only work if it's on an HTTPS secure website. It doesn't work on a non-secure HTTP website.

A demo is provided below:

To add the macro variable, go to Step 3 (Options tab), then navigate to the Content Template tab. Check the option 'Support macro variables on the front-end,' and then add the variable __SLIDECOPYLINK__ to the Skin template input box.

<div class="amazingcarousel-image">__IMAGE__</div>
<div class="amazingcarousel-title">__TITLE__, __SLIDEID__ of __SLIDETOTAL__</div>
<div class="amazingcarousel-description">__DESCRIPTION__</div>
<div class="amazingcarousel-button">__BUTTON__</div>
<div class="amazingcarousel-socialmedia">__SLIDECOPYLINK__</div>

If you want the copied link to directly jump to the position where the carousel is located on the page, in Wonder Carousel, navigate to Step 3 (Options tab), then go to Advanced Options. Add the following code to the Data Options input box:

data-copylinkbookmark="true"

If you want the link to open the corresponding slide in a lightbox on page load, add the following code to the Data Options input box:

data-copylinklightbox="true"