Nudge Guide (Engagement Rules)

Nudges allow HTML elements to be displayed to the website visitor in order to increase engagement. Two aspects are needed to implement nudges: Nudge variables and the Nudge HTML element.

Contents

Variables

First, the :nudges attribute must be declared within the Talkative scripts. Guide: Adding Scripts

Variables can then be set within.

Page scroll can be used to trigger a nudge. The value is in the form of page scroll percentage with a value between 0 and 100.

Time on page can be used to trigger a nudge. The value is in the form of seconds.

Example Nudge

    :nudges="[
        {
            rules:[
                // {name: 'scroll', value: 5},
                {name: 'time', value: 1},
            ],
            // elementId: 'testnudge',
        }
    ]"

Element

When conditions for a nudge are met, the Nudge HTML element will be displayed.

Example Nudge HTML Element

    <script type="text/x-template" id="testnudge">
        <div style="position: fixed; bottom: 10px; left: 10px; padding: 10px; background-color: #428ccc; color: white; font-family: sans-serif;">
            <h3>Nudging you into action!</h3>
            <div>
                <div>Nudge Interaction</div>
                <button @click="dismiss">Close</button>
                <button @click="hide">Hide</button>
            </div>
            <div>
                <div>Feature Options</div>
                <button @click="startVoice">Start Voice</button>
                <button @click="startChat({ bypassQos: true, interactionData: [{ label: 'Email', data: 'test@test.com', type: 'string' }] })">Start Chat</button>
                <button @click="openUi">Open UI</button>
                <button @click="startVideo">Start Video</button>
                <button @click="startEmail">Start Email</button>
                <button @click="startCobrowse">Start Cobrowse</button>
            </div>
        </div>
    </script>

    <!--
    Minimum nudge example: 
    <script type="text/x-template" id="nudge-id-in-script-generator">
        <div>
            <user content here>
        </div>
    </script>
    -->

Talkative can build custom nudges on request.

Last updated on 10th Dec 2018