How to enable DNI on Wix Landing Pages

Alexander Asadi

November 26, 2019 17:23

Due to platform design, HTML elements on Wix.com can only be modified using the Wix Corvid API. This means that in order to enable Dynamic Number Insertion using Retreaver.js, you must create an event handler which utilizes the Corvid API in order to modify HTML elements on your landing pages.

We will be using the Wix Corvid API documentation: postMessage() Documentation

View Wix's guide on "Working with HTML Elements" for more examples using postMessage()

Creating an Event Handler in Wix to modify HTML Elements

We will be sending a tracking number from Retreaver.js into the HTML Element that contains the number you intend on replacing. There may be multiple elements that you must post into but for the sake of this example we will pretend that you have one element with an ID of "myNumberElement1" that contains the old number in text format.

1) Posting a Retreaver Tracking Number to an HTML Element:

Under the Javascript Page Code menu inside of Wix, place a postMessage call to the HTML element that is pending replacement using a modified version of the Retreaver.js Script:

<script type="text/javascript">
    (function () {
        var scriptElement = document.createElement('script');
        scriptElement.type = 'text/javascript';
        scriptElement.async = true;
        scriptElement.defer = true;
        scriptElement.src = document.location.protocol + '//dist.routingapi.com/jsapi/v1/retreaver.min.js';
        scriptElement.onload = scriptElement.onreadystatechange = function () {

            Retreaver.configure({
                host: 'api.routingapi.com',
                prefix: document.location.protocol == 'https:' ? 'https' : 'http'
            });

            // Your code goes here!
            var campaign = new Retreaver.Campaign({campaign_key: 'YOUR CAMPAIGN KEY'});

            campaign.request_number(function (number) {

                document.getElementById('phone-number').innerHTML = link;
                $w("#myNumberElement1").postMessage( number.get('formatted_number') );

            });
        };
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(scriptElement);
    })();
</script>

This will trigger a postMessage event for that HTML event which includes the Retreaver tracking number.

2) Processing the posted message inside of the HTML Element:

To process the posted message event in your HTML element, you will also need to create an event handler using the "window.onmessage" trigger and place it inside the HTML element using the HTML Element Edit Code button as follows:

<script type="text/javascript">
  window.onmessage = (event) => {
    if (event.data) {
      document.getElementById("#myNumberElement1").innerHTML = event.data;  
    }  
  };   
</script>

This event handler will then process the posted message and update its contents with your new Retreaver Tracking Number.

Note

If you require assistance with a Wix integration, contact the Retreaver Support Team to troubleshoot your DNI implementation.

How to enable DNI on Wix Landing Pages

Creating an Event Handler in Wix to modify HTML Elements

Note

Comments

Articles in this section

Creating an Event Handler in Wix to modify HTML Elements

*Note*

Comments

Articles in this section

Note