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
- Navigate to UGC -> On-site widgets
- Click New widget in the upper right corner
- Select Card
- Click the Content tab in the left menu
- Choose the post you want to display in the card
- Optional: Click More in the upper right corner and rename your card
- 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
Corner roundness
Corner roundness
Follow these steps to adjust the Card’s corner roundness:
- Open the Card you want to edit
- Click on the icon to open the styling section
- Change the px value in the Corner roundness dropdown list
- Click Save changes
Display username
Display username
A card can be enhanced with the creator’s username, which is perfect for social proof.
Highlight the username when using UGC in Cards.
Don’t highlight the username for in-house posts.
Don’t highlight the username for in-house posts.
- Open the Card you want to edit
- Click on the icon to open the styling section
- Change if the username is displayed or not (on by default)
- Adjust where the username should be displayed
(Top left, top right, bottom left, or bottom right corner) - Adjust the icon that will be displayed before the username
(Social media icon, @-sign, or none)
- Adjust where the username should be displayed
- Click Save changes
Add a caption or text below the card
Add a caption or text below the card
You can expand the Card with a caption, which will be displayed below the post.
- Username - the username of the creator
- Product - Name of the tagged products with clickable links
- The post’s original caption
- Open the Card you want to edit
- Click on the icon to open the styling section
- Write the caption you want to display
- Click Save changes
Card size, height, width, and aspect ratio
Card size, height, width, and aspect ratio
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:
- Open the Card you want to edit
- Click on the icon to open the styling section
- Select your preferred size setting in the Card size dropdown list
- Click Save changes
- 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)
Display product hotspots
Display product hotspots
Hotspots highlight the tagged products in each post. The product’s name and price will be displayed when a visitor hovers over each hotspot.
- Open the Card you want to edit
- Click on the icon to open the Interactions section
- Change the Display product hotspots to Yes or No
- Click Save changes
Highlight product tag
Highlight product tag
This option is only available when you display hotspots in your Card
- Open the Card you want to edit
- Click on the icon to open the Interactions section
- Select what product you want to highlight in the Highlight product dropdown list
- Click Save changes
Hover effect
Hover effect
This option is only available when you don’t display hotspots in your Card
- 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
- Hover background color
- Hover background opacity
- Hover text (default: “Shop the look”)
- Hover text color
- Open the Card you want to edit
- Click on the icon to open the Interactions section
- Select what hover effect you want in the Hover effect dropdown list
- Click Save changes
What happens when a visitor clicks the post
What happens when a visitor clicks the post
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
- Open the Card you want to edit
- Click on the icon to open the Interactions section
- Select what click behavior you want in the On Click dropdown list
- Click Save changes
Adjust the look of the post popup
- Open the Card you want to edit
- Click on the icon to open the Interactions section
- Adjust the post popup options
- Click Save changes
- 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
How the post popup looks on desktop
How the post popup looks on desktop
How the post popup looks on mobile
How the post popup looks on mobile
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:- Navigate to UGC -> On-site widgets and select the card
- Click the Content tab
- Select a new post
- 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.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:
-
Ensure that Cevoid’s script is added to your
<head>or<footer>tag - Navigate to UGC -> On-site widgets and select your card
- Click Embed card in the upper right corner
- Copy the div-code
- Paste the div-code in the desired position on your website
- Save