Customer Insight Journeys Real Time Dynamic Forms Loader

by gustaf | Apr 16, 2024

In a previous post I blogged about how to break down the Form script that was exported from CI-J (Real Time). As some customers asked me about making this into a script that was the same and was dynamic based on query string parameters (parameters in the URL), I worked a bit on that and thought I’d share it here;

<div id="formdiv">
</div>

<script>
function getQueryParam(name) {
         const queryString = window.location.search;
         const urlParams = new URLSearchParams(queryString);
         const queryparam = urlParams.get(name);
         return queryparam;
        }

        const formobj = document.querySelector('#formdiv');
        const formid = getQueryParam('id');
        const formapiurl = 'https://public-eur.mkt.dynamics.com/api/v1.0/orgs/' + getQueryParam("orgid") + '/landingpageforms'; 
        const formcachedurl = 'https://assets-eur.mkt.dynamics.com/' + getQueryParam("orgid") + '/digitalassets/forms/' + formid;

        formobj.setAttribute('data-form-id', formid);
        formobj.setAttribute('data-form-api-url', formapiurl);
        formobj.setAttribute('data-cached-form-url', formcachedurl);
</script>
    
    <script src='https://cxppusa1formui01cdnsa01-endpoint.azureedge.net/eur/FormLoader/FormLoader.bundle.js'></script>

A few things that can be mentioned. This script expects that there will be two query string parameters:
id – the id of the form. Click on the form and copy it from the URL after the “id=”
orgid = the orgid which you can find in the PPAC or in the export of the script as I described in the previous article. If it is placed on the url: https://contoso.com/form.html then an example of the url would be:

https://contoso.com/form.html?id=6d10214b-cda1-41d8-9bf7-2c7262c527aa&orgid=b1616e23-557d-4a3f-8112-e8fac97f8ebe

Finally some organizations also have problems with loading a script from external sources. I will look at that too. Mainly there are two option. Copy-paste the entire script inline into this script or copy the script file to an “internal” or recognized store with a public URL and change the src-attribute. If you move this away from referencing Microsoft, I would recommend checking their website on a regular basis to make sure it hasn’t changed.

I hope this helps out!