A carousel bar rotates between multiple messages automatically — perfect for combining shipping info, promotions, and announcements in a single bar without taking up extra space.

This guide walks you through setting it up using an HTML block, a lightweight JavaScript library called Siema, and JS callbacks.

Step 1: Create a bar campaign

Go to Campaigns → New campaign → Bar
Choose your position (top or bottom of the page)
Set your background color and adjust the bar height as needed

Step 2: Add the HTML block

In the bar editor, add an HTML block and paste the following code:

<div class="wisepops-carousel">
  <div class="siema">
    <p>
      🎁 Only $5 left for a free mystery gift
    </p>
    <p>
      🚚 Free shipping on all orders over $10
    </p>
  </div>
</div>

To add more slides, simply add more <p> tags inside the <div class="siema"> block:

<p>
  Your third message here
</p>

To make a slide clickable, wrap the text in a link with the class wisepops-track-click:

<p>
  <a href="https://your-link.com" class="wisepops-track-click">
    Click here for 10% off your first order
  </a>
</p>

Using wisepops-track-click ensures the click is tracked in your campaign analytics. Learn more about tracking clicks in HTML blocks.

Step 3: Add the required CSS

Go to the Design tab on the left panel, then open the CSS tab. Add the following line:

.siema > p {
    float: left;
}

This is the only CSS required for the carousel to work properly. Everything else (font, color, alignment) can be customized optionally — see the examples below.

Step 4: Add the JavaScript callbacks

Before popup display

Go to Display → JavaScript callbacks → Before popup display and paste:

var script = document.createElement("script");
script.src = "https://cdn.jsdelivr.net/npm/siema@1.5.1/dist/siema.min.js";
script.defer = true;
document.body.appendChild(script);
script.onload = function() {
  var carousel = new Siema({
    selector: event.target.querySelector('.siema'),
    loop: true,
  });  var timer = null;
  function changeSlide() {
    if (timer) {
      clearTimeout(timer);
    }
    carousel.next();
    timer = setTimeout(changeSlide, 7000);
  }
  timer = setTimeout(changeSlide, 7000);
};

This loads the Siema carousel library and rotates slides every 7 seconds. To change the rotation speed, replace 7000 (both occurrences) with your preferred duration in milliseconds.

After tracked click (optional)

If you want to fire a Wisepops event when someone clicks a slide (e.g. to trigger another campaign), go to After tracked click and paste:

event.detail.wisepops('event', 'Clicked Bar');

You can then use this event to trigger other campaigns or track engagement.

Optional: customize the look with CSS

The carousel works with just the required CSS above. You can optionally add more styling in the Custom CSS field. Here are some common examples:

Change font, size, and color:

.wisepops-carousel p {
    font-family: "IBM Plex", sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: white;
    text-align: center;
    margin: 0 15px;
}

Style links inside slides:

.wisepops-carousel a {
    color: white;
    text-decoration: underline;
}
.wisepops-carousel a:hover {
    text-decoration: none;
}

Make the bar fill its container properly:

.wisepops-blocks-wrapper {
    position: relative;
}
.wisepops-blocks-wrapper > div {
    width: 100%;
}

Tips

Slide count: 2–4 slides work best. More than that and visitors won't see them all.
Keep it short: Each slide should be one line. Long text will wrap and break the layout.
Rotation speed: 5–7 seconds is a good range. Faster feels rushed, slower means fewer impressions.
Mobile: Test on mobile to make sure your text doesn't overflow. Shorten copy if needed.
Emojis: A leading emoji (🎁, 🚚, ✨, 🔥) grabs attention and helps differentiate slides at a glance.

Creating Bars

How to Create an Average Cart Value Booster

Create a rotating carousel bar