Storyguide's Dynamic Integration : STORY Mode

Introduction

Our Story Mode widget is a fantastic way to dynamise your webpage, do you want to implement it automatically in each of your web page ? It’s easy !

This tutorial will help you with the integration code configuration, in order to dynamically personnalise your widget.

The Main Parameters

The generated Storyguides through your project are customable thanks to the parameters in the load function.

Mandatory :

  • widget-id : single widget ID, given by Cirkwi

Location and language setting :

  • story-radius : display the area around the defined spot, within a x km radius
  • story-min-item (optionnal) : specify the number of Point of Interest (POI) wanted in the defined area
  • lang : data language type (EN, FR, ES…)

Details about the accomodation that you would like to highlight :

  • add-marker and marker-title : add a marker on the Map, with a defined text
  • story-title : the storyguide title

Template to use for your integration code :

<div class="wim-container" id="wim-widget-Your_ID_WIDGET"></div>
<script type="text/javascript">
    (function(_,c,i,r,k,w,I){if(!_[k]){_[k]={load: function(e){_[k].q=(_[k].q||[]).concat(e)}};w=c.createElement(r),I=c.getElementsByTagName(r)[0];w.async=1;w.src=i;I.parentNode.insertBefore(w,I)}})(window,document,'https://widget.wim.cirkwi.com/build/widget-loader.js','script','wimWidget');
    wimWidget.load([{
        "widget-id":"YOUR_ID_WIDGET",
        "params":{
            "story-radius": [LATITUDE, LONGITUDE, KILOMETRES],
            "story-min-item": MINIMUM_NUMBER,
            "story-title": "TITLE_OF_YOUR_STORYGUIDE",
            "add-marker": [LATITUDE_MARKER, LONGITUDE_MARKER],
            "marker-title": "TEXT_MARKER",
            "lang": "fr_FR",
            "story": "none"
        }
    }]);
</script>

Use Case Example

<div class="wim-container" id="wim-widget-123456"></div>
<script type="text/javascript">
    (function(_,c,i,r,k,w,I){if(!_[k]){_[k]={load: function(e){_[k].q=(_[k].q||[]).concat(e)}};w=c.createElement(r),I=c.getElementsByTagName(r)[0];w.async=1;w.src=i;I.parentNode.insertBefore(w,I)}})(window,document,'https://widget.wim.cirkwi.com/build/widget-loader.js','script','wimWidget');
    wimWidget.load([{
        "widget-id":"123456",
        "params":{
                "story-radius": [5.373475, -3.992613, 1],
                "story-min-item": 10,
                "story-title": "Around here",
                "add-marker": [5.373475,-3.992613],
                "marker-title": "The Hotel",
                "lang": "en_GB",
                "story": "none"
        }
    }]);
</script>

Help Needed ?

Any questions ? Please use the following contact form and specify your User ID, your code, the webpage link where you try to integrate the widget…. anything to help us to understand your issue 😉