Skip to main content

​
Overview

The CFS Carousel displays rotating marketing slides on a Customer-Facing Screen (CFS) connected to the POS terminal. This feature allows you to show promotional content, special offers, and branded messaging to customers while they wait at checkout or browse in-store. The carousel uses pre-defined templates configured in the ClearLine Marketing Center and delivers a URL that can be loaded in an iframe or webview on your customer-facing display.
Retrieve the carousel URL for a specific POS location and terminal. This URL points to a web-based carousel that automatically rotates through configured marketing slides. 
POST https://public-api-test.clearline.me/v2/pos/{posSystemId}/carousel

​
Headers

NameValueDescription
AuthorizationBearer access_tokenRequest authorization header
Content-Typeapplication/jsonContent type

​
Path Parameters

Field nameTypeDescription
posSystemIdstringThe identifier of the POS system (e.g., pax, clover)

​
Request Body

Field nameTypeRequiredDescription
posLocationIdstringYesID of the POS location
terminalIdstringYesThe identifier of the POS terminal

​
Response Fields

​
data
object
Carousel URL information
The carousel URL is session-specific and includes location and terminal identifiers for tracking and analytics.

​
Implementation Guide

1

Request Carousel URL

Call the carousel endpoint when initializing your customer-facing screen or when you want to display marketing content.
const response = await fetch(
  'https://public-api-test.clearline.me/v2/pos/clover/carousel',
  {
    method: 'POST',
    headers: {
      'Authorization': 'Bearer YOUR_ACCESS_TOKEN',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      posLocationId: 'LOC123',
      terminalId: 'TERM-05'
    })
  }
);

const data = await response.json();
const carouselUrl = data.data.url;
2

Display in Iframe

Load the carousel URL in an iframe on your customer-facing screen.
<iframe 
  id="carousel-frame"
  src="https://webtest.clearline.me/carousel/abc123?locationId=LOC123&terminalId=TERM-05"
  width="100%"
  height="100%"
  frameborder="0"
  allow="autoplay"
></iframe>
3

Handle Lifecycle

Manage the carousel lifecycle based on your POS workflow.
// Show carousel during idle time
function showCarousel() {
  document.getElementById('carousel-frame').style.display = 'block';
}

// Hide carousel during checkout
function hideCarousel() {
  document.getElementById('carousel-frame').style.display = 'none';
}

// Refresh carousel URL periodically (e.g., daily)
async function refreshCarousel() {
  const newUrl = await getCarouselUrl();
  document.getElementById('carousel-frame').src = newUrl;
}

Auto-Rotation

Slides automatically rotate based on configured timing (typically 5-15 seconds per slide).

Responsive Design

Adapts to different screen sizes and orientations on various CFS devices.

Dynamic Content

Content updates automatically when templates are changed in ClearLine Marketing Center.

Analytics Tracking

Tracks impressions and engagement for each location and terminal.

​
Configuration

​
Best Practices

  • Cache the carousel URL locally and refresh periodically (e.g., once per day)
  • Preload the iframe during POS system initialization
  • Use appropriate dimensions to avoid unnecessary scaling
  • Limit slide file sizes to ensure smooth transitions
  • Hide carousel during active checkout to avoid distracting customers
  • Show carousel during idle time to maximize marketing exposure
  • Ensure audio is muted if slides contain video content
  • Test visibility from typical customer viewing angles
Common issues and solutions:
IssueSolution
Blank carouselVerify templates are configured for this location
Slides not rotatingCheck network connectivity and iframe load status
Wrong contentConfirm location ID and terminal ID are correct
Performance issuesReduce slide image sizes in Marketing Center

​
Integration Workflows

Keep carousel visible at all times on a dedicated customer-facing screen.
// On POS startup
async function initializeCFS() {
  const carouselUrl = await getCarouselUrl();
  displayCarousel(carouselUrl);
  
  // Refresh daily
  setInterval(refreshCarousel, 24 * 60 * 60 * 1000);
}

​
Next Steps

Widget Integration

Combine carousel with interactive widgets

Automated Flow

Set up automated widget triggering

CFS Web API Events

Learn about iframe communication

Checkout Integration

View complete integration workflow