Integrazione webchat

Di seguito una guida su come integrare il widget Heres in una qualsiasi web page.

Nota bene: per l’integrazione su Shopify vedere le istruzioni specifiche disponibili alla pagina Shopify.

  • Includere il seguente snippet sul sito. Il caricamento è asincrono e non influenza in alcun modo le performance web.
(function (H, e, r, es, B, o, t) {
   H['heres-widget'] = es; H[es] = H[es] || function () { (H[es].q = H[es].q || []).push(arguments) };
   o = e.createElement(r), t = e.getElementsByTagName(r)[0];
   o.id = es; H.heresAgent = B; o.src = "https://widget.hereschat.it/stable/heres.js"; o.async = 1; t.parentNode.insertBefore(o, t);
}(window, document, 'script', 'heres', '#NOMEAGENTE#'));

Il #NOMEAGENTE# verrà indicato da Heres in fase di rilascio.

Si può accedere a tutte le funzionalità del widget utilizzando il namespace heres.

  • Chiamare l’api init, in modo da poter caricare e mostrare il widget del chatbot.
heres('init')
  • In caso di SPA occorre instanziare il widget una singola volta controllando la variabile window.heres.
if (!window.heres) {
   heres('init')
}
  • Se l’integrazione con il chatbot prevede una fase di riconoscimento degli utenti o altri requisiti specifici puoi consultare nel dettaglio la documentazione delle API.

Per integrare la chat Heres su pagine soggette a cache, si può usare l’approccio basato su cookie descritto di seguito. In questo caso, gli argomenti della funzione heres ('init', args) possono essere presi da un cookie che il server dovrà impostare su un cookie chiamato heres_init contenente gli argomenti codificati in JSON.

Per poter passare i dati contenuti nel cookie nella heres-chat si può usare questo snippet in javascript vaniglia:

(function() {
    (function (H, e, r, es, B, o, t) {
        H['heres-widget'] = es; H[es] = H[es] || function () { (H[es].q = H[es].q || []).push(arguments) };
        o = e.createElement(r), t = e.getElementsByTagName(r)[0];
        o.id = es; H.heresAgent = B; o.src = "https://widget.hereschat.it/stable/heres.js"; o.async = 1; t.parentNode.insertBefore(o, t);
    }(window, document, 'script', 'heres', '##AGENT_NAME##'));
  
    try { 
        var cookie = document.cookie.match(/(^|; )heres_init=(.*?);/)
        if (!cookie || !cookie[2]) throw new Error("heres_init cookie not found")
        var args = JSON.parse(unescape(cookie[2]))
        heres('init', args)
    } catch(e) {
        console.error('error reading heres_init cookie:', e)
    }
})()

API disponibili

heres('init', initObject) // Inizializza il widget
heres('destroy') // Consente di distruggere (deallocare il widget)
heres('show') // Mostra il widget
heres('hide') // Nasconde il widget
heres('open') // Apre la chat
heres('close') // Chiude la chat
heres('close') // Chiude la chat
heres('showBubble', arguments) // Imposta e mostra il bubble message
heres('hideBubble') // Nasconde il bubble message
heres('activateTrigger', trigger) // Permette di attivare un trigger.
heres('sendMessage', msg) // Invia in modo programmatico un messaggio al chatbot

Tramite le funzioni del widget è possibile realizzare integrazioni avanzate fra la web property che ospita la chat (sito) e il chatbot.

Per maggiori dettagli tecnici consulta la seguente pagina Doc API.