Perché le immagini non vengono visualizzate nel widget?

Le istruzioni riportate di seguito sono solo per desktop e laptop.

Se le immagini non vengono visualizzate nel tuo widget di chat tawk.to oppure gli articoli della tua Knowledge Base sembrano danneggiati, si caricano parzialmente o vengono mostrati solo dopo un aggiornamento della pagina, la Content Security Policy (CSP) del tuo sito web potrebbe essere la causa del problema.

La CSP è una funzionalità di sicurezza dei browser che controlla quali risorse (immagini, script, stili) possono essere caricate. Sebbene migliori la sicurezza, impostazioni troppo restrittive possono bloccare contenuti legittimi, comprese le risorse di tawk.to.

Come identificare problemi legati alla CSP

Potresti riscontrare problemi di CSP se noti:

• Il widget appare brevemente e poi scompare.

• Le immagini all’interno del widget non si caricano.

• Il widget si comporta in modo imprevedibile o presenta malfunzionamenti.

• Gli articoli della Knowledge Base si caricano in modo incompleto o solo dopo aver aggiornato la pagina.

Comprendere la Content Security Policy (CSP)

Le impostazioni CSP consentono di specificare quali fonti sono considerate affidabili per caricare contenuti sul tuo sito web. Se la tua CSP è troppo restrittiva, può bloccare immagini, script e stili necessari per il corretto funzionamento del widget tawk.to.

Per risolvere il problema, è necessario inserire nella whitelist le risorse di tawk.to all'interno delle impostazioni CSP.

Whitelist delle risorse del widget tawk.to

Per consentire il corretto caricamento del widget, aggiungi le seguenti direttive alle intestazioni di risposta del tuo server:

style-src

Content-Security-Policy: style-src *.tawk.to fonts.googleapis.com cdn.jsdelivr.net

script-src

Content-Security-Policy: script-src *.tawk.to cdn.jsdelivr.net

frame-src

Content-Security-Policy: frame-src *.tawk.to

font-src

Content-Security-Policy: font-src *.tawk.to fonts.gstatic.com

img-src

Content-Security-Policy: img-src *.tawk.to cdn.jsdelivr.net tawk.link s3.amazonaws.com

connect-src

Content-Security-Policy: connect-src *.tawk.to wss://*.tawk.to

form-action

Content-Security-Policy: form-action *.tawk.to

Esempio:

Se non sei sicuro di come modificare la configurazione del tuo server, consulta l’amministratore del tuo sito web o il provider di hosting. Per ulteriori informazioni, fai riferimento a questa guida su come aggiungere intestazioni ai server web più comuni.

Inserire nella whitelist il dominio della Knowledge Base di tawk.to

Se gli articoli della Knowledge Base non vengono caricati correttamente, aggiungi quanto segue alla direttiva connect-src:

Questo garantisce che i tuoi articoli vengano caricati correttamente la prima volta che un visitatore apre la pagina.

Esempio: aggiornamento della CSP in Cloudflare

Per gli utenti Cloudflare:

• Vai su Cloudflare > Rules > Custom Rules > Content Security Policy

• Applica l’intero set di direttive alle pagine che mostrano il widget o gli articoli della Knowledge Base. Questo assicura che tutte le risorse necessarie vengano caricate senza richiedere un aggiornamento della pagina.

Considerazioni aggiuntive

• Svuota la cache del browser
  I dati memorizzati nella cache possono impedire l’applicazione delle modifiche. Svuota la cache e poi aggiorna la pagina.

• Testa su più browser
  I diversi browser gestiscono la CSP in modo differente. Controlla su Chrome, Firefox, Safari ed Edge per individuare eventuali problemi specifici di un browser.

Se hai commenti su questo articolo o hai bisogno di ulteriore assistenza: