Skip to main content
Card Jp Cards are single-post widgets that display one specific piece of your approved content on your website. This allows you to add a shoppable image or video anywhere on your website. Cards are available under UGC -> On-site widgets .
Related articles

​
How cards work

Cards display a single, specific post that you select. When visitors click on the card, they see a detailed popup with the full version of the post, creator information, captions, and shoppable product tags. Key features:
  • Static content: Cards display the exact post you select and do not update automatically
  • Photo or Video: The post can either be a photo or a video
  • Shoppable experience: Product tags link directly to your product pages
  • Easy to design: The design can be customized for each card
  • Localized: Adjusts language, links, currency, and prices automatically based on what market they are displayed on (learn more about Markets here)
  • Responsive design: Adapts to different screen sizes and devices

​
Creating cards

  1. Navigate to UGC -> On-site widgets
  2. Click New widget in the upper right corner
  3. Select Card
  4. Click the Content tab in the left menu
  5. Choose the post you want to display in the card
  6. Optional: Click More in the upper right corner and rename your card
  7. Click Save Changes
You can also create a Card from the Library by opening a post and clicking Create Card

​
Design and customize cards

Once you have created a Card, you have multiple design and customization options that allow you to present the post in the best way and ensure it aligns well with the page it will be embedded into.
Styling changes will apply to the embedded card on the next page view when you click Save changes
Cards automatically inherit the typography and fonts from your website once embedded

​
Available design and customization options

Follow these steps to adjust the Card’s corner roundness:
  1. Open the Card you want to edit
  2. Click on the icon to open the styling section
  3. Change the px value in the Corner roundness dropdown list
  4. Click Save changes
A card can be enhanced with the creator’s username, which is perfect for social proof.Card Username Jp
Highlight the username when using UGC in Cards.
Don’t highlight the username for in-house posts.
Follow these steps to display/hide the creator’s username and adjust the layout of it:
  1. Open the Card you want to edit
  2. Click on the icon to open the styling section
  3. Change if the username is displayed or not (on by default)
    1. Adjust where the username should be displayed
      (Top left, top right, bottom left, or bottom right corner)
    2. Adjust the icon that will be displayed before the username
      (Social media icon, @-sign, or none)
  4. Click Save changes
You can expand the Card with a caption, which will be displayed below the post.Card Caption JpEach card also offers the following dynamic values for the caption:
  • Username - the username of the creator
  • Product - Name of the tagged products with clickable links
  • The post’s original caption
Follow these steps to add a caption to your Card:
  1. Open the Card you want to edit
  2. Click on the icon to open the styling section
  3. Write the caption you want to display
  4. Click Save changes
By default, Cards will fill the width they’re given and adjust the height dynamically, but sometimes you want to change this for specific use cases.Follow these steps to change the card size setting:
  1. Open the Card you want to edit
  2. Click on the icon to open the styling section
  3. Select your preferred size setting in the Card size dropdown list
  4. Click Save changes
Available options:
  • Fill parent width, dynamic height (default)
  • Fixed width, dynamic height - Set a specific width the card can fill
  • Fixed aspect ratio
  • Cover parent element size (Used when you want to use the card technology over a server-side hosted image)
Hotspots highlight the tagged products in each post. The product’s name and price will be displayed when a visitor hovers over each hotspot.
Refer to this article to add product tags and hotspots to your posts
Card Hotspots JpFollow these steps to display/hide product hotspots:
  1. Open the Card you want to edit
  2. Click on the icon to open the Interactions section
  3. Change the Display product hotspots to Yes or No
  4. Click Save changes
This option is only available when you display hotspots in your Card
You can select one product tag to highlight in a Card. This will display the selected product’s name and price without the need for visitors to hover on the hotspot.Card Highlight Product JpFollow these steps to highlight a product tag:
  1. Open the Card you want to edit
  2. Click on the icon to open the Interactions section
  3. Select what product you want to highlight in the Highlight product dropdown list
  4. Click Save changes
This option is only available when you don’t display hotspots in your Card
You can select an on-hover effect for each card instead of displaying product hotspots.Available hover effects:
  • None (default)
  • Zoom
  • Overlay with centered text that says “Shop the look” or something else
  • Overlay with bottom-aligned text that says “Shop the look” or something else
Additional settings when an overlay hover effect is used:
  • Hover background color
  • Hover background opacity
  • Hover text (default: “Shop the look”)
  • Hover text color
Follow these steps to adjust hover effect:
  1. Open the Card you want to edit
  2. Click on the icon to open the Interactions section
  3. Select what hover effect you want in the Hover effect dropdown list
  4. Click Save changes
You can change what happens when a visitor clicks the post in a Card.Available click options:
  • Open post popup (default)
  • Link to product - will link to the post’s first product tag
  • Link to Instagram - will link to the creator’s Instagram account
  • Custom link - Add a specific link
  • Do nothing - Nothing will happen when the visitor clicks the post which can be useful if you want to limit visitors to navigating only through hotspots
Follow these steps to change the click behavior:
  1. Open the Card you want to edit
  2. Click on the icon to open the Interactions section
  3. Select what click behavior you want in the On Click dropdown list
  4. Click Save changes

​
Adjust the look of the post popup

  1. Open the Card you want to edit
  2. Click on the icon to open the Interactions section
  3. Adjust the post popup options
  4. Click Save changes
The following adjustments can be made:
  • Display/hide claps/applause
  • Display/hide product hotspots in popup mode
  • Swap product image to secondary product image on product tag hover (on/off, on by default)
  • Mute video by default (on/off, off by default)
  • Popup background color and opacity
Ugc Popup Desktop Pn
Ugc Popup Mobile Pn

​
Changing the post in an existing card

Cards display static content, but you can change which post is displayed at any time: Follow these steps to change the post in a card:
  1. Navigate to UGC -> On-site widgets and select the card
  2. Click the Content tab
  3. Select a new post
  4. Click Save Changes
Unlike galleries, cards will not automatically update to show new content. You must manually change the post when you want to display different content.

​
Embed cards on your website

All cards can be embedded easily by copying + pasting an ID or a div-code.
  • General implementation
  • CMS block
Cevoid’s cards can be embedded on any HTML-based website using our script and a div-code for each widget.Follow these steps to add a card to your website:
  1. Ensure that Cevoid’s script is added to your <head> or <footer> tag 
    <script type="module" src="https://gallery.cevoid.com/index.js" defer></script>
  2. Navigate to UGC -> On-site widgets and select your card
  3. Click Embed card in the upper right corner
  4. Copy the div-code
  5. Paste the div-code in the desired position on your website
  6. Save
⌘I