For custom-build and other e-commerce platforms

Why YOUR SDK?

YOUR SDK offers an easy product content integration that enables seamless streaming of product content directly to webshop. Multiple content types such as descriptions, images, videos, reviews, question-and-answer are available to provide your customers with extensive product information. The more extensive your products pages are, the better informed your customer is. This in turn will increase conversion rates and time on the page and decreases bounce rates significantly. 

Who can use the SDK?

YOUR offers two integration methods to stream product content. One method is exclusively for parties that use Shopify as an ecommerce platform. Any other ecommerce platform as well as custom built webshops can use the YOUR software development kit. A few examples of other ecommerce parties are Adobe Commerce, Salesforce, Lightspeed, WooCommerce, BigCommerce, Oracle Commerce Cloud and many more. 

Follow the steps below to get started with YOUR SDK implementation for your webshop: create an account, save your shop's domain and name, configure product content settings, and implement the provided code snippet.

1. Set up your webshop

Step 1: Create an account

To be able to stream content, you must create an account as a shop. Go to this link to create an account for your shop.

Important note: If your shop is in the exclusive test period, we will generate an account for you because we will activate a paid subscription for free.

Step 2: Product content settings

In the second step of the onboarding you can edit each content block to match your website and preferences on the left side. Preview the content settings on the example page on the right side. The content layout as well as the font type will automatically adjust to the layout of your webshop. 

Don’t forget to Save

Video instructions

Watch this short video to get supported by images. 

2. Code implementation

Main snippet

When all fields and settings are completed and saved, click on "show snippet" to get the code snippet. 

Below you see the main snippet. This code snippet needs to be placed in the head of the html of the products pages where you want to YOUR to stream content to.

<script async defer
  id="YOUR:sdk"
  src="https://stream.your.io/sdk/embed/$sdkId/$locale.js"
  itemID=$productIdentifier
></script>

The different facets of the code snippet are discussed in the table below: 

itemID

The unique identifier of your product (GTIN/MPN/EAN) needs to be inserted as a value of the variable itemID. Here you have the possibility to insert one or multiple identifiers. Adding mulitiple product identifiers will increase your match rate - the amount of products from your webshops YOUR can stream high quality content to. 

Example with one identifier

itemID=$ProductIdentifier

Example with multiple identifiers

itemID=$ProductIdentifier,$ProductIdentifier2,$ProductIdentifier3

Locale

Change the language with one of the supported languages (en, nl) by changing the $locale in the URL.

Example with English

src="https://stream.your.io/sdk/embed/$sdkId/en.js"

sdkId

Replace the example sdkId with your shops' personal sdkId provided in the dashboard. Go to content styling -> show snippet. Change the $sdkId in the URL on every product page. This is a static value.

Example

src="https://stream.your.io/sdk/embed/df038289-2198-49ec-b7e9-aa2d8a72bbag/$locale.js"

Content snippet

Each content type has its own div block. The content block will inherit the locale from the snippet in the head for the language settings, meaning the product content will automatically transform to this language. 

<div data-your=$contentType></div>

ContentTypes

In your dashboard in content settings, all blocks will be customizable upon your preferences. The content types are briefly explained in the table below. Read this article to learn more about the settings of the content.

Example for product images

A div block for images looks like this: 

<div data-your="product-images"></div>

Insert all the "div blocks" of the content types you want to have active in the html of that specific product page. It will automatically be responsive to the page based on html/css settings. Position the div blocks on the product page based on your preferences.

Overview all blocks

  <div data-your="product-images"></div>
  <div data-your="product-description"></div>
  <div data-your="product-pros-cons"></div>
  <div data-your="product-reasons-to-buy"></div>
  <div data-your="product-specifications"></div>
  <div data-your="product-reviews"></div>
  <div data-your="product-qa"></div>
  <div data-your="product-videos"></div>
  <div data-your="product-pdf"></div>

Video instructions

Watch this short video to get supported by images. 

3. Whitelist your store domain 

Finally, register your domain with YOUR. From the left menu on your dashboard, navigate to stream content --> settings. Add your shops domain and name. This domain will grant your requests access to our database. Fill out these fields accurately and completely. 

Fields:

• Domain name without https://
• Shop Name

Don’t forget to Save

Request a demo

Take your online store to the next level. Try YOUR for free today.

Schedule an introduction meeting here.