Live in 5 minutes - Technical Documentation

loopingo Uplift loopingo Monetise 1. our plugins 2. installation 3. parameter description 4. alternative integration 5. javascript API 6. installation with Vue.js

loopingo Uplift

loopingo Uplift: Please use only the documentation in your loopingo account.

loopingo Monetise

1. Our plugins

You can simply use one of our templates or plugins for your shop system.

Shopify

Simply use our shopify integration snippet on bitbucket. You just have to insert your token and add the code at "additional scripts" in shopify.

To Bitbucket

Gambio

With our Gambio module you can add your loopingo token. Upon module activation the loopingo widget will show on your checkout page

Download plugin

WooCommerce

Just download our loopingo Wordpress Plugin for wooCommerce from the plugin store. Then fill in your token & you're live!

To the Plugin Store

JTL

Just install the loopingo JTL Plugin, to integrate loopingo in your webshop. Finally add the token & activate the plugin.

To the Community Store

OXID eShop

You can use our integration snippet for your OXID shop. Simply download the snippet here.

Download snippet

Shopware

You can find loopingos Shopware 5 and Shopware 5 plugins in the Shopware community store. Just download and activate with your token.

To the Community Store

Shopify

Simply use our shopify integration snippet on bitbucket. You just have to insert your token and add the code at "additional scripts" in shopify.

To Bitbucket

Gambio

With our Gambio module you can add your loopingo token. Upon module activation the loopingo widget will show on your checkout page

Download plugin

WooCommerce

Just download our loopingo Wordpress Plugin for wooCommerce from the plugin store. Then fill in your token & you're live!

To the Plugin Store

JTL

Just install the loopingo JTL Plugin, to integrate loopingo in your webshop. Finally add the token & activate the plugin.

To the Plugin Store

OXID eShop

You can use our integration snippet for your OXID shop. Simply download the snippet here.

Download snippet

Shopware

You can find loopingos Shopware 5 and Shopware 5 plugins in the Shopware community store. Just download and activate with your token.

To the Community Store

2. Installation of the loopingo widget - Monetisation & Tracking

The following steps are necessary to activate the loopingo Monetise integration:
1. Integration of the code snippet on the "Thank you" page
2. Filling of the parameters
3. Entry of the permitted hosts in the CORS settings in the partner portal

The code snippet has the following structure. An explanation of the respective parameters can be found in the table below.

GDPR explanation:

The first block up to email is there to ensure that the ad display remains unique(order_id / token), to track redemptions(voucher_code) and to respect an advertising block(email).

The latter is only transferred hashed to our server.

The second block from country to order_amount is responsible for the auction and is encrypted and sent to our servers. This enables us to deliver more relevant results to the customers. This data is not critical in terms of data protection without further context.

The third block from first_name to birthday never leaves the browser. It is used purely for the convenience of the customer, if we can prefill this data for specific offers.

Throughout the whole process, loopingo does not set any cookies on the customer's device.

The integration cannot be loaded without the CORS entries in the partner portal.

Copied to clipboard!


   
   
   	
<div id="loopingo-integration-container">
    <script type="text/props">
        {
            "token"         : "00000000-0000-0000-0000-000000000000",
            "order_id"      : "123-456-789",
            "voucher_code"  : "XYZ-1234-ABC",
            "email"         : "customer@email.de",
            
            "country"       : "DE",
            "postal_code"   : "80335",
            "gender"        : "female",
            "order_amount"  : "19.90",
            
            "first_name"    : "Max",
            "last_name"     : "Mustermann",
            "city"          : "Musterhausen",
            "street"        : "Musterstraße",
            "house_number"  : "1",
            "birthday"      : "1976-02-01",

            "is_test"       : false
        }
    </script>
</div>
<script async src="https://integration.loopingo.com/bundle_v1.js"
charset="UTF-8" type="text/javascript"></script>

3. Parameter description

Configuration

Last name

Description

Required

Validation/ Options

token

Authentication

true

string

is_test

Setting for live or test environment

true

boolean

Customer data

Last name

Description

Required

Validation/ Options

order_id

Order number
(displayed to the customer)

true

string

voucher_code

Used
voucher code

false

string

Customer email

true

Valid Email

first_name

Name

false

string

last_name

Last name

false

string

city

City

false

string

Street

false

string

house_number

House number

false

string

birthday

Birthday

false

string

country

Country
(invoicing address)

true

ISO3166 ALPHA-2
(DE, AT, CH)

postal_code

Postcode (invoicing address)

true

string

gender

Gender (invoicing address)

true

male|female|
undefined

order_amount

Order amount
in EUR (Without currency symbols)

true

string

4. Alternative integration

The following snippet can be used to fill the parameters on the client side.

Copied to clipboard!


   
   
   
   <div id="loopingo-integration-container">
   
   	<script id="loopingo-props" type="text/props"></script>
    
   </div>

Copied to clipboard!


   
   // Set Customer Data
var loopingo_object = {
    order_id      : '00000',
    voucher_code  : 'XYZ-1234-ABC',
    token         : '00000000-0000-0000-0000-000000000000',
    email         : 'demo@loopingo.com',
    first_name    : 'Max',
    last_name     : 'Mustermann',
    city          : 'Musterhausen',
    street        : 'Musterstraße',
    house_number  : '1',
    birthday      : '1976-02-01',   
    country       : 'DE',
    postal_code   : '00000',
    gender        : 'female',
    order_amount  : '00.00',
    is_test       : false,
}

// Inject to DOM
document.getElementById('loopingo-props').innerText = JSON.stringify(loopingo_object);

// Fetch loopingo integration App
var script = document.createElement('script');
script.setAttribute( 'src', 'https://integration.loopingo.com/bundle_v1.js');
document.body.appendChild(script);

5. Javascript API & manual initialisation

The loopingo integration is started automatically as soon as the application has been loaded. The integration can be started manually via the runtime API with the following script.

First, the API must be prepared as follows.

Copied to clipboard!


   
// Initialise API
window.loopingo_data = window.loopingo_data || [];
window.loopingoCall = window.loopingoCall || function() { 
loopingo_data.push(arguments); };

You can now interact with the integration:

Copied to clipboard!


   
// Manuelles starten der Integration
window.loopingoCall('run')

// Callback ausführen, falls keine Gutscheine angezeigt werden können
window.loopingoCall('event_hook', 'onNothingToShow', () => console.log('nothing to show'))

// Callback ausführen, wenn der Kunde einen Gutschein ausgewählt hat
window.loopingoCall('event_hook', 'onClicked', () => console.log('clicked'))

// Callback ausführen, wenn der Kunde das Fenster schließt
window.loopingoCall('event_hook', 'onClosed', () => console.log('closed'))

6. installation with Vue.js

loopingo_integration.component.vue

Copied to clipboard!


   
   <template>
    <div id="loopingo-integration-container">
        <script id="loopingo-props" type="text/props">{{ props }}</script>
    </div>
</template>
<script>
    export default {
        name    : 'loopingo-integration',
        props   : [
            'token',
            'voucher_code'
            'email',
            'first_name',
            'last_name',
            'city',
            'street',
            'house_number',
            'birthday',            
            'country',
            'postal_code',
            'gender',
            'order_amount',
            'order_id',
        ],
        methods : {
            fetchLoopingoApp()
            {
                let script = document.createElement('script')
                script.setAttribute('src', 'https://integration.loopingo.com/bundle_v1.js')
                document.head.appendChild(script)
            }
        },
        mounted()
        {
            let data = {
                token        : this.token,
                voucher_code : this.voucher_code,
                email        : this.email,
                first_name   : this.first_name,
                last_name    : this.last_name,
                city         : this.city,
                street       : this.street,
                house_number : this.house_number,
                birthday     : this.birthday,
                country      : this.country,
                postal_code  : this.postal_code,
                gender       : this.gender,
                order_amount : this.order_amount,
                is_test      : false,
                order_id     : this.order_id,
            }

            this.props = JSON.stringify(data)
            this.fetchLoopingoApp()
        },
        data()
        {
            return {
                props : '',
            }
        }
    }
</script>

example.vue

Copied to clipboard!


   
    <template>
    <loopingo-integration
            token="00000000-0000-0000-0000-000000000000"
            order_id="123456789"
            voucher_code="XYZ-1234-ABC"
            order_amount="19.99"
            email="customer@email.de"
            city="Musterhausen"
            street="Musterstraße"
            house_number="1"
            birthday="1976-02-01"            
            country="DE"
            postal_code="80469"
            gender="Male"
    ></loopingo-integration>
</template>
<script>
    import LoopingoIntegration from '../components/loopingo_integration.component'
    export default {
        components : {LoopingoIntegration},
    }
</script>