Carousel
Carousel is a built-in tool that allows end-users to insert a rotating slider (image carousel) into their design. This tool is supported for both display modes: emails and web pages.
Usage:
Enabling Carousel tool is a bit different than other built-in tools. Follow the steps below to enable and preview Carousel tool in your email designs.
Enable AMP for Carousel tool in the Builder Configuration: To activate AMP, set the
ampflag totruein theunlayer.init()function or theoptionsprop if you're using the React component.
Here’s the code for reference.
JavaScript Example:
unlayer.init({
id: "editor-container",
projectId: 123456, // replace with your project ID
displayMode: "email",
version: "latest",
amp: true,
});
React Example:
<EmailEditor
ref={emailEditorRef}
onReady={onReady}
minHeight={"90vh"}
options={{
projectId: 123456, // Replace with your actual Unlayer project ID
displayMode: "email",
version: "latest",
amp: true,
}}
/>
Use the AMP Preview Mode to see Carousel in action: After enabling AMP, you can preview the carousel tool within the builder by toggling the AMP Preview button in the editor UI.
Exporting AMP HTML for Carousel functionality: To export the AMP-enabled HTML content, use the
exportHtml()function with the{ amp: true }option. This will return both standard and AMP-compliant HTML in the export payload.
unlayer.exportHtml(function (data) {
var json = data.design;
var html = data.html;
var ampHTML = data.amp.html; // extract the HTML with AMP
console.log("Design JSON:", json);
console.log("Design AMP HTML:", ampHTML);
console.log("Design HTML:", html);
}, { amp: true }); // enables AMP in the HTML output, used for Carousel tool
NOTE:
The
ampconfiguration for Carousel tool is only relevant whendisplayModeis set toemail.
If you are using
displayMode: "web", AMP does not need to be enabled explicitly; it will be handled automatically.