Configuration

The Flash Widget uses a configuration JSON object with the following fields:

{
  "triageId": "6463797818c19f6802d64a2c", // ID of the triage to be used in the widget
  "iButton": { // Configuration for the widget button
    "type": "Classic", // Type of widget button will be "BottomBar" or "Classic". Default is "Classic"
    "text": { // Text or object with translations for the widget text info
      "en": "Talk with a CUPRA expert",
      "es": "Habla con un experto de CUPRA"
    },
    "header": { // Header for the widget button
      "title": { // Text of object with translations for the widget header
        "en": "Need Help?",
        "es": "¿Necesitas ayuda?"
      }
    },
    "background": { // Background for the widget button
      "url": "https://myimage.com/image.jpg", // URL of the image
      "type": "image" // Type of the background image will be "image" or "video". Default is "image"
    }
  },
  "origin": "online-web", // Origin of the widget used for tracking and statistics
  "customs": { // Custom functions for the widget
    "checkout": "async function (t,o,n,r){const c='https://onlive.site';if(o&&0<o.length)for(var a of o)try{await((a,e=1)=>new Promise((t,o)=>{var n=c+'/wp/?post_type=product&add-to-cart='+a+'&quantity='+e,r=new XMLHttpRequest;r.open('GET',n,!0),r.onload=function(){(302===r.status?t:o)(r.response)},r.send()}))(21214,a.count)}catch(t){console.log('Error adding product to cart: ',a.id,t)}return c+'/cart'}" // Custom function for the checkout
  },
  "bubble": { // Configuration for the widget bubble only implemented for "Classic" iButton type
    "button": { // Configuration for the bubble button
      "text": { // Text or object with translations for the bubble button text
        "en": "Let's talk",
        "es": "Hablemos!"
      }
    },
    "hidden": false, // Boolean to hide or show the bubble. Default is false
    "extraHeader": { // Extra header for the bubble
      "icon": "https://myimage.com/icon.jpg", // URL of the icon
      "text": { // Text or object with translations for the bubble header
        "en": "Salon Online",
        "es": "Salón Online"
      }
    }
  },
  "HeaderText": "", // Option text or object with translations for the widget header
  "cssVariables": { // CSS variables for the widget
    "--onlive-widget-font-size": "14px",
    "--onlive-widget-font-family": "'Open Sans', sans-serif",
    "--onlive-widget-watermark-font-size": "1.1em",
  },
  "watermarkURL": "", // URL of the watermark image
}

Here an example of a configuration object:

{
    "bubble":
        "button": {
            "text": {}
        },
        "hidden": false,
        "extraHeader": {
            "icon": "https://cdn.onlive.site/465d30ae-41aa-4666-b1b5-6cb4a4f63265/assets/multimedia/2ad5d655-98d8-4e36-a7b7-8c2e70a97ebb-double-arrow-down-blue%202.png",
            "text": {
                "en": "Salon Online"
            }
        }
    },
    "origin": "La tienda",
    "customs": {
        "checkout": "async function (t,o,n,r){const c='https://onlive.site';if(o&&0<o.length)for(var a of o)try{await((a,e=1)=>new Promise((t,o)=>{var n=c+'/wp/?post_type=product&add-to-cart='+a+'&quantity='+e,r=new XMLHttpRequest;r.open('GET',n,!0),r.onload=function(){(302===r.status?t:o)(r.response)},r.send()}))(21214,a.count)}catch(t){console.log('Error adding product to cart: ',a.id,t)}return c+'/cart'}"
    },
    "iButton": {
        "text": {
            "en": "Talk with a CUPRA expert",
            "es": "Habla con un experto de CUPRA"
        },
        "type": "BottomBar",
        "header": {
            "title": {
                "en": "Need Help?",
                "es": "¿Necesitas ayuda?"
            }
        },
        "background": {
            "url": "https://static.vecteezy.com/ti/vetor-gratis/p3/20502464-cupra-marca-logotipo-carro-simbolo-branco-projeto-espanhol-automovel-ilustracao-com-preto-fundo-gratis-vetor.jpg",
            "type": "image"
        }
    },
    "triageId": "6463797818c19f6802d64a2c",
    "bubbleText": {
        "en": "<p><b>Need help?</b><br/>Our team will be pleased to help you</p>",
        "es": "<p><b>¿Necesitas ayuda ?</b><br/>Nuestro equipo estará encantado de ayudarte</p>"
    },
    "headerText": "",
    "cssVariables": {
        "--onlive-widget-font-size": "14px",
        "--onlive-widget-font-family": "'Open Sans', sans-serif",
        "--onlive-widget-watermark-font-size": "1.1em",
        "--onlive-widget-initial-bubble-width": "283px",
        "--onlive-widget-primary-button-width": "100%",
        "--onlive-widget-initial-bubble-height": "119px",
        "--onlive-widget-header-image-max-height": "32px",
        "--onlive-widget-primary-button-font-size": "14px",
        "--onlive-widget-form-checkbox-input-width": "1.5rem",
        "--onlive-widget-form-checkbox-input-height": "1.5rem",
        "--onlive-widget-secondary-button-font-size": "14px",
        "--onlive-widget-primary-button-border-radius": "0px",
        "--onlive-widget-primary-button-text-transform": "none",
        "--onlive-widget-triage-node-content-font-size": "14px",
        "--onlive-widget-primary-button-background-color": "#49c6ca",
        "--onlive-widget-primary-button-box-shadow-hover": "none",
        "--onlive-widget-secondary-button-text-transform": "none",
        "--onlive-widget-interactive-button-bubble-text-size": "12px",
        "--onlive-widget-primary-button-background-color-hover": "#48b1b5"
    },
    "iButtonTitle": {
        "en": "Virtual Shop",
        "es": "Compra virtual",
        "pl": "Testing Title"
    },
    "watermarkURL": "",
    "customScripts": [
        "https://cdn.statically.io/gh/hnakao/statistics/v2.0.2/onlive-send-leads.js"
    ],
    "agentWhiteList": [],
    "bubbleButtonText": {
        "en": "Let's talk",
        "es": "Hablemos!"
    },
    "organizationName": "Tiendanube Staging",
    "positionOnScreen": "right",
    "iButtonBackground": {
        "url": "https://i.pinimg.com/736x/d3/2d/d7/d32dd7331e5214744e2df5640b0ea298.jpg",
        "type": "image"
    },
    "maxLoopVideoCount": 3,
    "hiddeQueuePosition": true,
    "mobilePositionOnScreen": "center"
}