All Collections
Distribute
Technical Overview of the Activate Tab
Technical Overview of the Activate Tab
Updated over a week ago

The Activate tab consists of two main features, the Widget Design, and the Widget Management tab.

  • The Widget Design tab allows you to access the markup for your widgets and to make edits to the content and its style.

  • From the Widget Management tab you will create an instance of that widget style, select your sorting preferences, photo source, and advanced settings, and grab the widget code.

Additional Implementation Information:

Standard Implementation Checklist:

  1. Provide valid product feed Product Feed Documentation

  2. Collect media

  3. Curate and publish media

  4. Create/generate widget style

  5. Create widget instance and generate widget code (in development mode)

  6. Place widget code in your local dev environment

  7. Insert checkout code in your checkout confirmation page Checkout Code Implementation Guide

  8. Choose validation method for the checkout pixel Checkout Pixel Validation Methods

  9. Remove development mode when ready to go live!

Product Feed Integration: A product feed contains all of the products that exist within your storefront. This file / feed has all of the metadata surrounding each product from your store (e.g. Product Price, Product URL, SKU, Product ID, or Stock Image URL).

In order to tag an incoming media to a specific product, we need to have that product information imported into our system.

We need the following information about each product in the feed:

  • Product Name

  • Product URL

  • Product Unique Identifier (this must not be dependent on stock #, color, etc)

  • Product Stock Image URL

  • Category Name (optional)

  • Category Unique Identifier (optional)

Once you are ready to create the feed, please read our full documentation to match the schema. When you are ready to hand over the feed to us, let your Earned Content Account team know and we can start on getting the feed parsed in.

Checkout Pixel Implementation: Implementing the Social Native Checkout Code allows you to send important data from your conversion funnel to Social Native. The purpose of this code is to capture the data from the orders made by visitors, and tie the data back to Olapic components installed on your site.

Once implemented, Social Native will be able to analyze the conversion funnel closely, and provide valuable insight in your Analytics dashboard. Please reach out to Support for further information.

Read the full Checkout Code implementation guide here.

Widget Script: Information about the makeup of the widget script can be found below.

The script tag consists of the following attributes:

data-olapic="olapic_specific_widget"

data-instance="[WIDGET INSTANCE ID]"

data-apikey="[API KEY]"

data-tags="[]" <!-- Place the dynamic variable for your product/category unique id into the 'data-tags' attribute in our javascript. This attribute is only required if the source of a widget is set to dynamic stream or dynamic category. -->

data-lang="[LANGUAGE CODE]" <!-- i.e. for French text set this to fr_FR if this is what is set in the languages translations -->

async="async"

Language Translations (data-lang)

In order to display the corresponding language text in the Uploader & Lightbox, you will need to add the data-lang attribute to the widget script with the value of the language translation code (i.e. "fr_FR") set in the Widget Design's Langs tab.

For example the gallery code would look something like this by adding the data-lang attribute:

<div id="olapic_specific_widget"></div>

<script type="text/javascript"

data-olapic="olapic_specific_widget"

data-instance="19b712539efcc21aea88f021fd3b3912"

data-apikey="0f8b0a2b3373b6f214d23dfe72012bd4830ce12f2e190bed10555266124928c2"

data-lang="fr_FR"

async="async"></script>

The data-lang attribute will need to be added in all of the widget scripts as per above.

The translated strings will appear once this parameter has been added and the translations matrix has been completed. Your Social Native Implementation Manager will send this out to you to be completed.

Did this answer your question?