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, right before the closing </head> tag
At the bottom of the page at the end before the closing </body> tag
Add the script inside react-helmet for all pages that use the galleries.
<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 for 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.
Note: Captions don't change language. Only fixed strings do.
Build a component (recommended)
We recommend you build a component to wrap our gallery codes in. Below is a template you can copy to get started.
import React, { useEffect } from 'react'
const CevoidGallery = ({ galleryId, productId, marketId, marketCurrencyId, hidePrices }) => {
useEffect(() => {
window?.cevoid?.reloadAll()
}, [galleryId, productId, marketId, marketCurrencyId, hidePrices])
return (
<div
id="cevoid-container"
data-gallery={galleryId}
data-product={productId}
data-market={marketId}
data-market-currency={marketCurrencyId}
data-hide-prices={hidePrices}
></div>
)
}
export default CevoidGallery
Note that there's a window object called cevoid_gallery that you can call load() from to refresh the galleries.
Explanation data values
data-gallery is the ID of the gallery
data-product can either be set to auto or a unique identifier like id or SKU. This identifier depends on what value you use in our feeds. Setting this value to "auto" will try to find the correct product to use based on the current URL.
data-market is an optional value so that you can programatically set which market the gallery should load. The input is the MARKET_ID found under "Products and markets" in Cevoid.
data-market-currency is also an optional value and can be used to programatically overwrite the currency to currency from another market. This value is used in combination with data-market and not alone.
data-hide-prices Is used to hide the prices all together. Setting this value to true will hide all prices for the gallery
For a more detailed explanation of data-market parameters: Read this tutorial
Product page gallery
For product page galleries, remember to add a key value to the component so that it refreshes if the id changes. For example:
key={`cevoid-gallery-${product_id}`}
You can also replace the data-product value from a product_id to "auto". Cevoid will then automatically fetch the correct product by using the slug in the url.
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!