Incorporamenti

Gli incorporamenti ti permettono di inserire un modulo SupDesk direttamente nel tuo sito web. I visitatori si iscrivono alla lista d’attesa, ti scrivono o si registrano a una beta senza mai lasciare il tuo sito.

Cerchi una bolla di chat invece di un modulo? La chat dal vivo ha un loader tutto suo (chat.js) e uno snippet dedicato — vedi Chat dal vivo.

Si possono incorporare tre moduli:

Aggiungere un incorporamento

Lo snippet di ogni modulo viene generato per te nella console: copialo e incollalo nella tua pagina dove vuoi che compaia il modulo.

• Lista d’attesa — nella sezione Lista d’attesa del progetto, sotto la scheda impostazioni
• Contatto — nella pagina Impostazioni del progetto, in Incorpora il modulo di contatto
• Beta — nella pagina del programma beta, in Incorpora

Uno snippet ha questo aspetto:

<script src="https://acme.supdesk.app/embed.js"
        data-supdesk="contact"
        data-title="Contatta Acme" data-height="520" async></script>
<noscript>
  <iframe src="https://acme.supdesk.app/embed/contact" width="100%" height="520"
          style="border:0" title="Contatta Acme"></iframe>
</noscript>

Lo script inserisce il modulo dove si trova il tag e ne adatta l’altezza quando il modulo cambia — per esempio quando compaiono errori di validazione o quando si riduce a una breve conferma dopo l’invio. Il blocco <noscript> è un iframe semplice, così il modulo funziona anche per i visitatori con JavaScript disattivato.

Tutto viene servito dal tuo dominio del portale. Se hai un dominio personalizzato, la console genera gli snippet su quel dominio; altrimenti usano il tuo sottodominio *.supdesk.app.

Domini personalizzati e domini radice

Il tuo dominio personalizzato e l’origine a cui punta lo snippet devono condividere lo stesso dominio radice perché il frame dell’integrazione possa parlare con il loader. La console genera sempre lo snippet con la tua origine di portale attiva, quindi uno snippet copiato dopo la configurazione del tuo dominio personalizzato non richiede alcuna riflessione: script e modulo sono serviti entrambi dal tuo dominio personalizzato, stessa origine.

Il caso da tenere d’occhio è uno snippet copiato prima di aggiungere un dominio personalizzato. Le richieste alla tua origine precedente vengono reindirizzate al dominio personalizzato e il loader accetta quel reindirizzamento solo quando i due condividono un dominio radice — ad esempio un sottodominio di portale feedback.apibot.dev e un dominio personalizzato www.apibot.dev vivono entrambi su apibot.dev. Se il tuo dominio personalizzato si trova su una radice completamente diversa, il reindirizzamento è tra domini e l’integrazione non funzionerà: ricopia lo snippet dalla console una volta che il tuo dominio personalizzato è attivo.

Attributi

Puoi inserire più incorporamenti in una pagina: assegna a ciascuno il proprio tag <script>.

Content Security Policy

Se il tuo sito invia un header Content-Security-Policy, consenti l’origine del tuo portale in due direttive, altrimenti il browser bloccherà l’incorporamento:

script-src https://acme.supdesk.app;
frame-src  https://acme.supdesk.app;

Usa qui il tuo dominio personalizzato se gli snippet lo utilizzano. Non serve consentire altro: l’incorporamento non carica script di terze parti nella tua pagina e non effettua richieste di rete proprie.

Protezione anti-spam

I moduli incorporati usano le stesse protezioni del tuo portale: hanno un limite di frequenza per visitatore e per progetto e, se hai configurato Turnstile per il progetto, la verifica compare anche dentro l’incorporamento.

Poiché la tua chiave Turnstile è registrata sul tuo dominio e gli incorporamenti vengono serviti da quello stesso dominio, la chiave funziona senza alcuna configurazione aggiuntiva.

Privacy e accesso

I moduli incorporati non leggono né scrivono mai una sessione del portale: per progettazione i browser non inviano quei cookie a un frame ospitato sulla pagina di qualcun altro. Ogni incorporamento funziona invece prima via email: il visitatore inserisce un indirizzo email e riceve un link per posta.

Questo ha una conseguenza utile da sapere quando posizioni un incorporamento: il visitatore completa il percorso in una normale scheda del browser, non dentro la tua pagina.

• Lista d’attesa — l’iscrizione è registrata subito; l’email contiene la posizione e il link di invito personale
• Beta — l’email contiene il link di accettazione che effettua l’iscrizione
• Contatto — il messaggio arriva subito nella tua posta in arrivo; l’email è la ricevuta e permette di vedere le tue risposte

Le voci della lista d’attesa create tramite un incorporamento vengono registrate con origine embed, così puoi distinguerle dalle iscrizioni dal portale nella tabella delle voci e nelle esportazioni CSV.

Cosa vedono i visitatori

L’incorporamento mostra solo il modulo — senza intestazione, piè di pagina o navigazione del portale. Riprende il colore del brand del progetto, quindi eredita il tuo colore d’accento senza alcun lavoro di stile da parte tua.

Le pagine incorporate non vengono indicizzate dai motori di ricerca; le pagine pubbliche del portale sono le versioni canoniche e indicizzabili.

Vecchio snippet della lista d’attesa

Prima che esistesse il loader via script, l’incorporamento della lista d’attesa era un semplice iframe verso /waitlist/embed:

<iframe src="https://acme.supdesk.app/waitlist/embed" width="100%" height="360"
        style="border:0" title="Lista d'attesa"></iframe>

Continua a funzionare: non devi cambiare nulla. Sostituirlo con lo snippet attuale ti dà l’adattamento automatico dell’altezza; la height fissa del vecchio iframe è l’unico vero svantaggio.