This tutorial covers how you can add galleries and cards to your website.
To learn how to change the design and layout of galleries, read this guide.
To learn how to change the design of cards, head over to this guide.
Add Cevoid’s script
Based on what fits your project best, place the Cevoid script in one of the following positions
Right before the closing </head> tag
At the end of the page, right before the closing </body> tag
<script type="module" src="https://gallery.cevoid.com/index.js" defer></script>
Adding the Cevoid script this way allows you to add a Cevoid UGC widget anywhere on your website. If you only want to add the script to the pages that include the actual UGC widgets, you can do that as well.
Embed a gallery
From the showcase tab, select the gallery you want to embed
Click Embed gallery
Copy the Gallery ID or <div> code
Paste this code on your website where you want the gallery to appear!
Code example
<div id="cevoid-container" data-gallery="{ENTER_GALLERY_ID}"></div>
Use the Gallery ID if you have access to a Cevoid dedicated CMS block and the <div> code for all other cases.
Embed product page gallery
Product page galleries use the exact same implementation as other galleries. Follow the same steps as a gallery but make sure that you copy the embed information from your dedicated Product page gallery.
Code example
<div id="cevoid-container" data-gallery="{ENTER_GALLERY_ID}" data-product="auto"></div>The Product page gallery has the data-product="auto" attribute automatically and only include images and videos containing the product matched against the URL.
You can also replace the "auto" value with the product ID programatically. If you do so, make sure that you use the same identifier that you have set up in your product feeds.
Embed a Card
From the showcase tab, select the gallery you want to embed
Click Embed card
Copy the Card ID or <div> code
Paste this code on your website where you want the gallery to appear!
Code example
<div id="cevoid-container" data-card="{ENTER_GALLERY_ID}"></div>
Use the Gallery ID if you have access to a Cevoid dedicated CMS block and the <div> code for all other cases.
Market-specific language, prices, and currencies
All Cevoid UGC widgets automatically updates its language, prices, and currencies based on the URL and the settings you have set up for that specific market. Please read these tutorials on markets to learn more.
If you are a developer, you can also set this programmatically. Please read this tutorial to learn how
Adding a card over an existing image (advanced use-case)
Sometimes you might want to add a card over an existing image on your website to add hotspots to it. We have added some special settings for cards to allow that but it does require some coding to achieve a good end result.
When creating a card make sure you select the option "Cover parent element size" when selecting the size of the card. This adds position absolute to the card container and makes it fill the width and height of your parent element.
Add position relative to your parent element and place the Cevoid card container inside the parent element. Keep the image behind the card and the Card will animate in over it since it's lazy loaded.
(Optional) If you have a block in a CMS you can add the card ID as an input field to make the area dynamic. This way you can place any card in the blocks image and add it anywhere on your website!