Uploading this custom code does not let modal load

[katrina-engelsted]

I used the API to upload this code to an experience:

curl --location --request PATCH 'https://api.lytics.io/api/experience/b45324d966709e31f1810d02f6c07ff5' \
--header 'Authorization: {{apiKey}}' \
--header 'Content-Type: text/plain' \
--data-raw '{
    "experience": {
        "vehicle": {
            "detail_override": {
                "attachment": "bottom-left",
                "body": "Su privacidad es importante para Whirlpool, consulta nuestra <b><a href='\''https://www.whirlpool.mx/politicas-de-privacidad'\'' style='\''text-decoration:underline;'\''>Política de Privacidad</a></b>.",
                "className": "pi-capture-leads-1",
                "colors": null,
                "headline": "Suscríbete a las novedades y ofertas de Whirlpool y disfruta de un 5% de descuento en tu próxima compra.",
                "layout": "slideout",
                "okMessage": "Subscribirme",
                "templateToken": null,
                "formStates": {
                    "error": {
                        "delay": 0,
                        "headline": "Error",
                        "msg": "Hubo un problema a la hora de registrar tu subscripción."
                    },
                    "success": {
                        "delay": 0,
                        "headline": "Gracias!",
                        "msg": "En unos instantes estarás recibiendo un correo con tu cupón de descuento."
                    }
                },
                "formElements": [
                    {
                        "label": "Nombre",
                        "name": "first_name",
                        "required": true,
                        "type": "text"
                    },
                    {
                        "label": "Apellido",
                        "name": "last_name",
                        "required": true,
                        "type": "text"
                    },
                    {
                        "label": "Correo:",
                        "name": "email",
                        "required": true,
                        "type": "email"
                    },
                    {
                        "label": "Confirmar Correo:",
                        "name": "email_confirmation",
                        "required": true,
                        "type": "email"
                    },
                    {
                        "label": "País",
                        "name": "country",
                        "placeholder": "Select",
                        "type": "select",
                        "values": [
                            {
                                "label": "Colombia",
                                "value": "colombia"
                            },
                            {
                                "label": "Costa Rica",
                                "value": "Costa Rica"
                            },
                            {
                                "label": "Ecuador",
                                "value": "ecuador"
                            },
                            {
                                "label": "Guatemala",
                                "value": "guatemala"
                            },
                            {
                                "label": "México",
                                "value": "mexico"
                            },
                            {
                                "label": "Perú",
                                "value": "peru"
                            },
                            {
                                "label": "Puerto Rico",
                                "value": "puerto-rico"
                            },
                            {
                                "label": "Otro",
                                "value": "other"
                            }
                        ]
                    },
                    {
                        "name": "accept",
                        "required": true,
                        "type": "checkbox-group",
                        "values": [
                            {
                                "label": "Al registrarte aceptas la Política de Privacidad de Whirlpool, así como recibir notificaciones y publicidad.",
                                "value": "true"
                            }
                        ]
                    }
                ],
                "confirmAction": {
                    "callback": "function (event, payload, cb) {console.log('\''confirmAction Callback'\'', event, payload);const email = payload.data[2]['\''value'\''];email_confirmation = payload.data[3]['\''value'\''],error_msgs = document.querySelectorAll('\''.email_error_msg'\'');if (email != email_confirmation) { error_msgs.forEach((item) => { item.removeAttribute('\''hidden'\'') })} else {cb(true);}}",
                    "name": "custom confirm",
                    "waitForAsyncResponse":"true"
                },
                "onLoad": "function (event, module) {Array.from(document.getElementsByClassName('\''pf-required-flag'\'')).forEach(v=>{v.innerHTML = '\''Campo Obligatorio'\''});const a=document.querySelector('\''form.pf-custom-form'\''),b=document.getElementById('\''email'\''),c=b.parentElement;c.classList.add('\''emails_container'\'');const d=document.getElementById('\''email_confirmation'\''),e=d.parentElement;e.classList.add('\''emails_container'\'');const f=document.createElement('\''span'\'');f.style.color = '\''red'\'';f.insertAdjacentText('\''afterbegin'\'','\''Correo no Coincide'\''),f.classList.add('\''email_error_msg'\''),f.classList.add('\''pi-capture-leads-1'\''),f.setAttribute('\''hidden'\'',!0),c.appendChild(f),e.appendChild(f)}"
            }
        }
    }
}'

I successfully received a 200 and when I went to preview and activate the experience, it would not generate on the webpage. At some points, I got a console errors, but sometimes there was no error and no way to see why the form was not loading.

I am not sure if there was something incorrect with a function. If there is, can the API check on that issue?

I apologize if this issue is vague. I can certainly provide more details.

[RaeEversmann]

@katrina-engelsted can you try removing "waitForAsyncResponse":"true" and see if that fixes it

[katrina-engelsted]

It did not fix it. But there is also something strange going on when I make updates. The API calls is not updating the code. It feels like when I make a certain amount of calls to the endpoint, it no longer wants to update the config.

One thing that I noticed is that the config.js and all of the pathfora libraries are loading. But the config.js is empty.

I think that you are right in that something is erroring in the config code and instead of error handling it is breaking in the preview/activate mode.

Maybe can I pop something on your calendar and we can go through the issue together? I can show you what is occurring.