Quick Start

Add Interactive Mod to your project, and start interacting with visitors.


1 Register for an account with Interactive Mod.

New accounts are automatically entered in a free subscription. Register


2 Register your web app.

Sign in to the web console and proceed to the website section, and add a new domain.


3 Verification

Once a domain name is added, verification is required to enable Interactive mod services. Copy the $siteid and place it into a meta tag content as follow.


    <meta name="imod:siteid" content="$siteid">
        

4 Copy and past the script tags in the footer before the </body> closing tag.

The Interactive mod JavaScript library required the jQuery library. If the jQuery library is already present, simply copy the interactiveMod library and paste it after the jQuery library.



    // jQuery 
    <script 
        src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous">
    </script>

    // interactiveMod 
    <script 
        src="https://interactionapi.com/js/interact.js"
        integrity="sha256-l8J9d/Bqn23s57ZhR4LSd4cabVV/sM838sGcJ+o6WdU="
        crossorigin="anonymous">
    </script>

        

5 Initiate the script as follow


    <script>

    // Instantiate the Interactive class 
        const interact = new Interact();

    // Heart beat is disabled by default. 
        interact.heartBeat({

    // Enable heart beat. 
        enabled: true,

    // Set recurrence frequency in milliseconds. 
        frequency: 10000
        })

    // Start interacting. 
        .engage();

    </script>
        

6 Using data attributes.

They are only two data attributes to remember [data-imod-etag] and [data-imod-params].



    // Example
    <button

    // The data-imod-etag attribute or Event tag 
    // is binding the event to a custom tag 
        data-imod-etag="click:contact-us"

    // The data-imod-params attribute accepts json data. 
    // Inline declaration of parameters related to page, element and surroundings.  
    // Certain parameters will override any default settings.  
        data-imod-params="{
            // By adding the name of a mod, any events triggered on this element,  
            // will limit the display of interactions to the mod 'contact us'.  
            "mod": "Contact Us"
            // Will override default delay settings.  
            "delay": 0
        }"

        class="btn btn-primary">
        Contact Us
    </button>

        

7 Using JavaScript.

Interactive Mod can be used programmatically as well.


    /** 
     * set method accepts two arguments  
     * etag  
     * Params  
     **/
        interact.set( $etag, $params );

    // This example will recreate the same process shown in example 6
        interact.set( 'click:contact-us', {
            mod: 'Contact Us',
            delay: 0
        });
        

8 Direct Input.

Interactions can be displayed instantaneously by providing a trigger.


    <button
        data-imod-etag="click:contact-us"
        data-imod-params="{

    // Interactions can be displayed instantaneously by providing a trigger
        "trigger": {
            "mod": "Contact Us"
        },

    // Global delays can be overridden by specifying a delay.
        "delay": 0,

    // Relevant data can be parsed into a mod by using rel and template tags.
        "rel": {
            "message": {
                "subject": "Well Hello There!""
                }
            }
        }"

        class="btn btn-primary">
        Contact Us
    </button>
        

9 Inline Parsing.

Relevant data can be parsed into a mod by using rel and template tags.

To prevent funny interactions from being displayed, relevant data must placed within and envelope.

    // Inline parameter declaration.
        "rel": {
            "message": {  // <- Envelope 
                "subject": "Well Hello There!",
                "body": "What brings you in on this beautiful day?"
                 // Custom keys are allowed inside an envelope of relevant data 
                "key": "<- Anything goes"
                }
            }
        }"
        

Inline parsing can be applied on the headings of each strategy model. Each headings is composed of two parameters, the subject and the message

    // Declared parameters can be parsed
    // by placing the relevant tags in the headings parameters subject, message as follow.
        {{message.subject}},
        {{message.body}}
         

10 Creative Events With Endless Possibilities.

Custom events can be anything! We recommend adopting a naming convention that works best for you.

        // The below examples will give you a few hints. 
        // Note the examples below all though we are using 'click events', 
        // click can be replaced with any event type, as long as it is present in the event object. 

        data-imod-etag="click:left->sidebar"
        data-imod-etag="click:left->sidebar.products"

        data-imod-etag="click:left->sidebar.products.watches"
        data-imod-etag="click:left->sidebar.products.watches.green"
        data-imod-etag="click:left->sidebar.products.watches.green.$99"

        data-imod-etag="click:left->sidebar.products.jackets"
        data-imod-etag="click:left->sidebar.products.jackets.leather"
        data-imod-etag="click:left->sidebar.products.jackets.leather.gray"
        data-imod-etag="click:left->sidebar.products.jackets.leather.gray.$199"
        data-imod-etag="click:left->sidebar.products.jackets.leather.black"
        data-imod-etag="click:left->sidebar.products.jackets.leather.black.$299"

        data-imod-etag="click:left->sidebar.products.jackets"
        data-imod-etag="click:left->sidebar.products.jackets.tech-fabric"
        data-imod-etag="click:left->sidebar.products.jackets.tech-fabric.saleprice:$49,coupon:50%"
        data-imod-etag="click:left->sidebar.products.jackets.tech-fabric.price:$99"
    

Examples