.png?height=120&name=Creatable_logo_white%20(1).png){kind=logo}
This article provides an overview of available widget templates on the Creatable dashboard.
Creatable allows brands to make use of content generated by campaigns, as well as any other source, on the PDP by customizing and implementing a widget.
We offer a range of widget customizations that can be configured to fit your PDP branding and formatting.
Widget examples
The following examples provide visual inspiration for using our widget on your product page.
Below you will find a custom design with the widget occupying the right half of the page on desktop and full width on mobile, with a call to "As Seen On..", a popular phrase to connect with those you're likely to see and follow (or may already be following) on social media.
Note how this unfolds as a full width experience on mobile showing partial card content. This shows the consumer that there is more content available for them to browse. Such customizations are made easy on the Creatable dashboard. See further below.
See a full page view on desktop, and corresponding carousel on mobile, offering the consumer a broader presentation of content from a number of creators.
Add-to-cart and shoppability directly from the widget converts more traffic into sales.
Widget customization
The Carousel widget is a scrollable carousel of thumbnails that, when clicked on by a consumer, opens the video player in a popup modal. The carousel shows multiple thumbnails and is entirely customizable on the platform.
To begin the process of creating and customizing a new widget, from your Creatable account on the menu, navigate to “Site” > “Widgets”. Create and name a new widget. Click the menu item on the right and choose “Customize”.
Inside the customization panel, there are 2 main areas. On the left you can make design or content changes, and on the right, you can preview those changes in a Desktop or Mobile view. Publish the widget and copy the embed code for use on your website.
Design and layout customization
The look and feel of the widget is managed through 6 different sections:
- General
- Cards
- Arrows
- Products
- Video player
- Advanced
General
This section covers global settings, title settings and spacing settings.
Desktop cards
This setting controls the amount of cards shown in the widget at Desktop breakpoints
Mobile cards
This setting controls the amount of cards shown in the widget at Mobile breakpoints
Desktop: 5 cards vs 3 cards; Mobile: 3 cards vs 1 card
Carousel sizing
This setting controls how the widget will fit inside a container on your website.
Fill horizontally will stretch the widget to the width of the container, the height of the widget adjusting as needed.
Fill vertically will stretch the widget to the height of the container, the width of the widget adjusting as needed.
Minimum assets required
In order to maintain a consistent presentation, you can choose to hide the widget if there is not enough content to display. For example, you could require a minimum of 3 videos in order for your widget to display on your website.
Hide related element
In some cases when the widget is not going to display, you may wish to hide the parent container element on the page. You can specify the CSS selector of the parent element and the widget will hide this based on your display rules.
Modal close option
When viewing videos on the widget, the popup modal displays an “X” to close itself. This can be located either inside the popup itself, or in the upper right of the browser window.
Title
Show/hide the widget’s title. Use this when you want to control the title area of the widget through your website rather than the widget. This is useful when embedding a widget into an existing design that has a specific area allocated for the widget.
Title text
Change the verbiage of the title.
Title alignment
Align the widget title to the left, right or center.
Title HTML tag
This is useful if you want the widget title to inherit any CSS styles from your website.
Title top spacing / Title bottom spacing
You can specify any spacing requirements above or below the title in order to match your website’s design.
Top / bottom spacing
These settings allow you to adjust the spacing above or below the widget, based on either desktop or mobile breakpoints.
Cards
This section covers settings and icons for each of the cards in the widget.
Corner roundness
Change the radius of the card corners in the widget carousel.
Card spacing
Change the space between the cards in the widget carousel.
Video / Photo icon
Change the icon of the video or photo asset displayed on the card. This must be an SVG type file.
Icon opacity
Change the opacity of the icon for either desktop or mobile devices.
Arrows
This section covers settings and icons for the widget carousel as well as the widget modal.
Inactive arrow visibility
Show/hide when the widget arrows are inactive. For example, if you are at the beginning or end of a carousel, you can either disable the arrow or hide it all together.
Left arrow / Right arrow
Upload a custom SVG type icon for the left and right arrows.
Icon color
Change the color of the arrow icons.
Background color
Change the background color of the icon area.
Border color
Change the border color of the icon area.
Roundness
Change the radius of the arrow icon area.
Icon color
The color of the icon when hovered.
Background color
The color of the icon area background when hovered.
Border color
The color of the icon area border when hovered.
Products
This section covers settings for how products are displayed in the widget.
Show products
Show/hide products in the widget.
Show product price
Show/hide the product price display.
Product title position
Display the product price above or below the product image.
Product title alignment
Align the product title either left or centered.
Product arrow position
Align the product carousel arrows (used when multiple products are matched to an asset) below the product image or on the sides of the product image.
Additional tracking parameters
If you wish to append additional tracking parameters to product links in the widget, please specify them as key value pairs with the pattern: “key1=value1&key2=value2”.
Show CTA
Show/hide the CTA (button) when the product is the same as the current page.
Display first
When the same product as the page is matched to the asset, show that product first.
CTA action
You can choose whether the CTA closes the modal, opens the link, or opens the link in a new tab.
CTA label
Change the verbiage of the CTA to match your website.
CTA action
When the CTA is for a DIFFERENT product than the page the widget is on, open the link or open it in a new tab.
CTA label
The text label of the CTA for when the product is DIFFERENT from the page the widget is on.
Button border color
Change the color of the CTA button border.
Button background color
Change the color of the CTA background.
Button text color
Change the color of the text.
Button roundness
Change the radius of the corners of the button.
Background color
Change the background color of the CTA when hovered.
Border color
Change the border color of the CTA when hovered.
Button text color
Change the text color of the CTA when hovered.
Product preview corners
Change the corner radius of the product preview.
Product slide up corners
Change the corner radius of the product detail slide up.
Video player
This section covers icon settings for the video player in the widget. All icons are required to be SVG files, this allows the icons to work in a scalable manner and be customized with CSS.
Play icon
When the video is paused, the play icon is shown.
Pause icon
When the video is playing, the pause icon is shown.
Mute icon
When the audio is able to be heard, the mute icon is displayed
Unmute icon
When the audio is not able to be heard, the unmute icon is displayed
Advanced
This section covers widget extension modules and custom CSS.
External add to card module
If your website supports add-to-cart functionality, that can be leveraged in our widget by providing an extension. This extension maps to events within the widget to trigger add to cart functionality
Custom CSS
You can add your own custom CSS to further customize the widget. Please consult a designer or developer before making any CSS changes as this could have unintended results.
Content customization
The widget supports the display of either manuallcurated content or content that is delivered dynamically via our Content API, configurable per below.
Manual
Use the manual content setting to curate the content you wish to display to your customers.
Select/remove multiple assets, change the sort order and control exactly how the content will display on your widget.
Dynamic
You can configure the widget to pull content dynamically from the platform.
Content type
Choose between video, photos or a combination of videos and photos.
Sort content by
Assign a sorting order for the content, which can be either the most recent content, most viewed (popular) content or highest converting (sales).
Content limit
You can choose how much content you wish to display on the widget, using this feature you can choose to showcase your top 15 highest selling assets.
Attributes filter
Using the attributes filter, you can filter by custom attributes that have been assigned to your content. This lets you display assets that have been tagged or categorized for your application accordingly.
The attribute filter also allows you to specific dynamic attributes that you can pass to the widget embed in realtime. When the widget loads, it will consider those attributes as part of the query for content, adding additional filter as specified.
When configuring your widget in this manner, please also check "Use real time input" and the widget will expect a value to be passed via the embed code.
Custom content query
Leverage the power of our Content API. Built on a GraphQL backend, you can configure a query to deliver the exact content you need for your application with total flexibility.
Embed code & publishing
Once you have customized your widget’s design and content display, you are ready to publish and embed it. In the upper right of the Customization panel you can click Publish to make your changes live on our CDN. Once you have done this, click “Copy embed code” to get an embed code for this widget to place on your website.
If you have any questions, please feel free to reach out to our support team via email: support@creatable.io or you can contact your client success account manager directly.