Skip to main content

How to Create a Custom Widget for a 5 Star Card

On Creatopy, you can create ad variations at scale by using data from your E-commerce platforms that will automatically update in your live campaign every time your data is updated.

You can connect your data to your ad creative with the help of the Feed Ad Builder, which helps create variations for multiple products from a single design.

This article will show you how to create a custom 5-rate card using an embed widget. Naturally, you can use this widget to create different custom elements, depending on your needs.

 

Set up your CSV

  1. Create a spreadsheet¹.
  2. Input the data in your spreadsheet. For this scenario, the following columns are mandatory:
    • Product ID - This column will contain the values of your Product IDs, which will be linked with the Feed Ad Builder.
    • Rate - The rate attributed to the Product ID.
  3. Go to File > Share > Publish to web.
  4. On the Publish to web window, go to the Link section.
  5. Select the sheet you want to be published.
  6. Set the spreadsheet as Comma-separated value.
  7. Copy the link and save it for later.

csvwidget2.gif

 

Link the CSV with the Feed Ad Builder

  1. Open your Design/Design Set.
  2. From the Toolbar, click on Feed.
  3. Click Select Feed.
  4. Click Create Feed.
  5. Select Upload from my URL and type in your CSV link.
  6. Click on the SettingsDropdownMenuIcon.pngDropdown icon and set the section as follows:
    • Sync Feed Data - Every day.
    • List separator type - Comma (default).
    • Target ID - Product ID.
  7. Click Continue.
  8. Link your parameters accordingly.
  9. Preview and adjust the design if needed.

5starwidget1.gif

 

Create the Custom Widget

  1. From the Toolbar, click on Elements
  2. Click on Widgets.
  3. Click on Embed code.
  4. From the Widget's Tooltip, Select Background.
  5. Set the Background to None.
  6. From the Widget's Tooltip, Select Settings.
  7. In the Embed code box, add the JScript that will render your 5-star card².
  8. Open the Timeline.
  9. Move the Embed layer on top of all existing layers from the creative.

5starwidget2.gif

 

Set up & adjust the Ad Tag code

  1. Enable Ad Serving.
  2. Obtain the Ad Tag code of your design. Choose one of the two:
    • Download as XLS. A Spreadsheet is downloaded to your computer where you can copy the Ad Tag.
    • Copy code. Copy the Ad Tag directly from Creatopy.
  3. Before uploading the Ad Tag, adjust the macro as follows:
    • In the "targetId" column, replace {TARGET_ID} with a value corresponding to the Product ID column from your CSV. In this scenario, the CSV has five variations, and if you want to show the 5th variation, you can replace {TARGET_ID} with 1234, as that's the value representing the 5th variation of the design.
  4. Copy the adjusted code into your Ad Network of choice as a 3rd party tag.

5starwidget3.gif

 

Note¹: You are free to use any spreadsheet software available to you. If you're using an E-commerce platform, you can build the additional information on the CSV provided by the platform.

Note²: The following string will fetch the information regarding the star from the CSV:

var color = window.feedData ? window.feedData.Color : "#FF0000";
var rate = window.feedData ? parseFloat(window.feedData.Rate) : 4.5;

Related articles