shopping24 documentation

s is for shopping

Integrate your s24widget

This page describes how to integration the shopping24 widget into your website.

Requirements

None! (The widget used to be a jQuery plugin)

Web Performance

We care about your page’s web performance! The JavaScript file is small, minified and you can load it asynchronously (non-blocking).

Integration

The integration consists of a container and a script. Something like this:

<div class="s24widget" data-app-id="abcd1234" data-widget-id="987" data-search-term="Blue Jeans"></div>
<script src="https://widget.s24.com/js/s24widget.min.js" async></script>

Widget Container

First you need a container in your template in which the widget will be injected. It should have the class s24widget and two attributes data-app-id and data-widget-id.

<div class="s24widget" data-app-id="APP_ID" data-widget-id="WIDGET_ID"></div>

SEARCH-Widget

If you use our SEARCH-Widget, you can set you search term in a data-search-term attribute, like so:

<div class="s24widget" [...] data-search-term="MY SEARCH TERM"></div>

SEMANTIC-Widget

Your site has to be crawled priorly for the semantic widget to be able to identify the correct content. Please contact cooperations@s24.com if your infrastructure denies such access, so we can provide you with the required IP addresses.

User ID

If you track a user ID, you can pass it to your widget container via a data-puid attribute. This could look like this:

<div class="s24widget" data-app-id="APP_ID" data-widget-id="WIDGET_ID" data-puid="USER_ID"></div>

AdBlocker Safety

We also offer you the option to integrate our widget AdBlocker safe. If you’re interested, please email us.

Custom A/B-Test

We also provide you with the possibility to track conversion of different variants. This could be interesting for you if you’d like to override the widget’s css or want to test different positions for the widget.

To identify your variants, please add the data-campaign attribute to your widget container. This could look like this:

<div class="s24widget" data-app-id="APP_ID" data-widget-id="WIDGET_ID" data-campaign="VARIANT-A"></div>