Integrate the Carousel into Your Project
This guide explains how to embed a carousel into your project after creating it in Cloma.io.
Before proceeding, make sure you have created a carousel and added its content. For this, refer to the Create a carousel guide.
Before proceeding, make sure you have created a carousel and added its content. For this, refer to the Create a carousel guide.
1️⃣ Add the script tag
Insert the following script into the <head/> section or just before the </body/> tag in your HTML:
<head>
...
+ <script src="https://cloma.io/cdn/carousel/web/0.3.2/c-carousel.min.js" data-carousel-key="{YOUR_CAROUSEL_KEY}"></script>
</head>2️⃣ Insert the carousel root element
Add the following element wherever you want the carousel to appear:
+ <div id="cloma-carousel-root"></div>⚠️ Notes
- Replace data-carousel-key with your own carousel key generated from Cloma.io.
- For best performance, place the script tag before </body>.
Example: Complete HTML Integration
Below is an example HTML page. Use this as a reference to integrate the carousel into your own web project.
💡 Click the code block below to open it in a new window and preview the carousel in action.
⚠️ If you click Don’t show today, the carousel won’t appear for the rest of the day. To check it again, you can clear your browser’s local storage.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Fun Carousel Example</title>
<script src="https://cloma.io/cdn/carousel/web/0.3.2/c-carousel.min.js" data-carousel-key="kr8NiCZdzZ"></script>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: #f0f4f8;
margin: 1.5rem;
padding: 0 1rem;
text-align: center;
color: #333;
}
</style>
</head>
<body>
<h1>Integrate the carousel into your project!</h1>
<div id="cloma-carousel-root"></div>
</body>
</html>