Un widget mostra i tuoi eventi, biglietti o persone Kadens sul tuo sito web, e i visitatori possono acquistare senza lasciarlo. Ti servono un account Kadens e l'accesso per modificare il tuo sito web. Crea un widget, consenti il tuo sito web, poi copia e incolla un breve codice.
Un widget è una parte della tua pagina Kadens che vive dentro il tuo sito web. Ne esistono tre tipi:
| Widget | Descrizione |
|---|---|
Eventi e biglietti | I tuoi prossimi eventi, con l'acquisto dei biglietti dentro il tuo sito. |
Un evento | La pagina di un evento: date, luogo, descrizione e biglietti, con Acquista. |
Persone | Schede profilo delle persone che scegli, collegate ai loro profili pubblici. |
Corsi | I tuoi corsi con i loro prezzi, ognuno collegato alla sua pagina sul tuo sito. |
Piani e prezzi | I tuoi piani di abbonamento affiancati, ognuno collegato alla sua pagina di iscrizione. |
Orario delle lezioni | Le tue prossime lezioni come un'agenda, sempre aggiornata. |
Pulsante di acquisto | Un pulsante per un evento, un corso o un piano, con lo stile della tua pagina. |
Il codice che incolli nomina solo il tuo widget. Quando modifichi il widget in Kadens (cosa mostra, il suo layout o i suoi colori), ogni sito web che lo usa si aggiorna da solo. Non devi mai incollare di nuovo il codice.
Quattro passaggi, senza bisogno di programmare.
In Kadens, apri Integrazioni, poi Widget, e creane uno. Scegli cosa mostra e come appare.
Aggiungi l'indirizzo del tuo sito web, come https://www.example.com. Un widget appare solo sui siti web che consenti.
Apri il tuo widget e vai alla scheda Installa. Copia il codice mostrato lì. Porta già il tuo nome utente e il tuo widget.
Incolla il codice dove vuoi che appaia il widget, poi pubblica il tuo sito web. Trova il tuo strumento di creazione siti nelle guide qui sotto per i passaggi esatti.
Un widget si carica solo sui siti web che aggiungi al tuo elenco.
Questo protegge il tuo checkout: nessuno può mettere il tuo widget su una pagina che non controlli. Il tuo elenco viene inviato ai browser come regola di sicurezza (frame-ancestors), quindi un sito web che non è nell'elenco non mostra nulla dove dovrebbe esserci il widget.
| Indirizzo | Risultato |
|---|---|
https://www.example.com | Consentito. Un solo sito web. Qualsiasi percorso o barra finale che digiti viene rimosso. |
https://*.example.com | Consentito. Ogni sottodominio di un livello, come shop.example.com. Non include example.com stesso né livelli più profondi come a.b.example.com: aggiungili come voci a parte. |
* | Non consentito. Permetterebbe a qualsiasi sito web su internet di mostrare il tuo widget. |
https://*.com | Non consentito. Un wildcard ha bisogno di un dominio reale dopo di sé. |
http://www.example.com | Non consentito. I siti web devono usare https. |
http://localhost:3000 | Consentito per i test sul tuo computer. http funziona solo per localhost. |
https://www.example.com/tickets | Salvato come https://www.example.com. L'intero sito web è consentito, non una sola pagina. Un indirizzo con ? o # viene rifiutato. |
https://203.0.113.7 | Non consentito. Usa il nome di dominio del tuo sito web. |
Uno script e un elemento. La scheda Installa costruisce questo codice per te.
Per qualsiasi sito che accetta codice. Regola l'altezza da solo.
Negli esempi di questa pagina, your-username e your-widget-id rappresentano i tuoi valori reali. Copia il tuo codice reale dalla scheda Installa.
| Attributo | Tipo | Descrizione |
|---|---|---|
handleObbligatorio | string | Il tuo nome utente Kadens. |
widgetObbligatorio | string | L'id del widget da mostrare. |
locale | string | La lingua del widget. Se manca, il widget usa il lang della tua pagina. |
color-scheme | light | dark | auto | Forza colori chiari o scuri per questo posizionamento. Ometti per usare l'impostazione del widget stesso. |
title | string | Il nome accessibile del riquadro del widget, letto dagli screen reader. Il valore predefinito è Kadens widget. |
data-layer | boolean | Invia anche ogni evento del widget a window.dataLayer, per Google Tag Manager. |
meta-pixel | boolean | Invia un evento Purchase al tuo Meta Pixel quando qualcuno completa un acquisto. La tua pagina deve già caricare il pixel. |
Per i site builder che rimuovono gli script. Altezza fissa.
Scegli il tuo strumento di creazione siti. Ogni guida indica cosa ti serve prima, dove va il codice e cosa controllare.
Ti serve l'accesso per modificare le pagine del sito, oppure qualcuno che ce l'abbia e incolli il codice per te.
Per pagina: incolla il codice in ogni pagina in cui deve comparire il widget. Se il tuo sito ha uno spazio per il codice su tutte le pagine (spesso chiamato codice di intestazione o di piè di pagina), puoi mettere lì la prima riga una sola volta e incollare solo la seconda in ogni pagina.
Apri la pagina pubblicata in una nuova scheda. Il widget compare dove hai incollato il codice, di solito in pochi secondi.
WordPress self-hosted (WordPress.org) funziona sempre. Su WordPress.com serve un piano a pagamento con funzioni di hosting: il piano Free rimuove lo script e il widget non compare.
Per pagina: aggiungi un blocco Custom HTML a ogni pagina o articolo in cui deve comparire il widget. WordPress non ha uno spazio integrato per il codice su tutte le pagine, quindi incolla tutto il codice in ogni blocco.
Apri la pagina sul sito pubblicato, non nell'editor. Il widget compare dove hai aggiunto il blocco.
Custom Code richiede un piano Premium e un dominio collegato. Senza entrambi, il widget non comparirà sul sito.
Sulle pagine che scegli. Custom Code viene eseguito nella pagina stessa, sul tuo dominio, e il widget compare alla fine di ogni pagina scelta.
Apri la pagina sul tuo dominio, non nell'anteprima dell'Editor. Il widget compare alla fine della pagina.
Devi essere il titolare del negozio o un membro dello staff con il permesso di modificare i temi in Shopify admin.
Per modello: una sezione aggiunta nell'editor del tema compare in ogni pagina che usa quel modello (per esempio, ogni pagina prodotto). Per mostrarla in una sola pagina, crea prima un modello apposito. Per tutte le pagine, vai in Online Store › Themes › … › Edit code e incollalo in layout/theme.liquid subito prima del tag di chiusura del body; il widget compare allora alla fine di ogni pagina.
Apri il negozio in una nuova scheda, non nell'editor del tema, e vai a quella pagina. Il widget compare dove si trova la sezione.
Code Embed funziona solo con un piano del sito a pagamento o in un Workspace Core, Growth, Agency o Freelancer. Su un sito Starter gratuito il widget non compare.
Per pagina: metti un Code Embed dove deve comparire il widget. Per tutte le pagine, incollalo invece una volta in Site settings › Custom code › Footer code, che viene eseguito prima del tag di chiusura del body e richiede un Site plan a pagamento; il widget compare allora alla fine di ogni pagina. Per tenerlo dentro le pagine, metti solo la prima riga in Footer code e la seconda in ogni Code Embed.
Apri il sito pubblicato. Nel Designer il Code Embed mostra un segnaposto al posto del widget; è normale.
Gli script funzionano sui piani Core, Plus e Advanced. Sul piano Personal il widget non comparirà, e nemmeno la versione iframe.
Per pagina: aggiungi un blocco Code in ogni pagina in cui deve comparire il widget. Per tutte le pagine, incollalo invece una volta nel pannello Code Injection in Settings.
Apri la pagina del sito pubblicato in una finestra privata. Nell'editor il blocco mostra un segnaposto, perché gli script non vengono eseguiti nell'anteprima dell'editor.
Ti serve l'accesso in modifica al progetto Framer.
Per pagina: metti un Embed dove deve comparire il widget e incolla tutto il codice in ogni Embed.
Apri il sito pubblicato e vai alla pagina. Il widget compare dove hai messo l'Embed.
Ti serve un account dello staff Ghost che possa pubblicare (Author o superiore). I Contributors possono aggiungere la card ma non pubblicarla.
Per articolo o pagina: aggiungi una card HTML dove deve comparire il widget. Per tutte le pagine, incollalo invece una volta in Settings › Advanced › Code injection › Site footer; il widget compare allora alla fine di ogni pagina. Per tenerlo dentro gli articoli, metti solo la prima riga in Site footer e la seconda in ogni card HTML.
Apri l'articolo o la pagina pubblicati. L'editor mostra la card come codice; il widget compare solo nella pagina pubblicata.
Ti serve il permesso di modificare e pubblicare pagine del sito o landing page in HubSpot.
Per pagina: incolla il codice nel Source code di un modulo Rich text dove deve comparire il widget, oppure in Settings › Advanced › Footer HTML dell'editor della pagina per mostrarlo alla fine di quella pagina. Per tutte le pagine di un dominio, vai in Settings › Content › Pages, scegli il dominio e incollalo in Site footer HTML.
Apri la pagina pubblicata. Se il widget manca, riapri il Source code del modulo: se la riga dello script non c'è più, l'ha rimossa HubSpot.
Modifica questi elementi nello studio widget di Kadens. Il tuo sito web si aggiorna da solo.
| Impostazione | Valori | Descrizione |
|---|---|---|
Tema | site | kadens | minimal | bold | soft | dark | Uno stile di partenza. Puoi regolare ogni dettaglio dopo averne scelto uno. |
Schema colori | light | dark | auto | Chiaro, scuro, oppure automatico per seguire il dispositivo del visitatore. |
Colori | accent, accentForeground, background, card, text, mutedText, border | I tuoi colori per pulsanti, sfondi, schede, testo e bordi. |
Caratteri | Il carattere del tuo sito, il carattere di sistema del visitatore, oppure uno dal catalogo caratteri Kadens. I caratteri si caricano dentro il widget da Kadens, mai da Google. | |
Dimensione del testo | 12 to 22 px | La dimensione base del testo del widget. |
Raggio degli angoli | 0 to 64 px | Quanto sono arrotondati schede e pulsanti. |
L'elemento widget invia eventi DOM alla tua pagina, così puoi misurare clic e vendite con la tua analitica.
| Evento | Contenuto | Descrizione |
|---|---|---|
kadens:ready | { widget } | Il widget è stato caricato ed è visibile. |
kadens:widget-view | { widget, ...props } | Un'azione del visitatore dentro il widget. Con data-layer, viene inviata anche a window.dataLayer come kadens_widget_view. |
kadens:item-click | { widget, ...props } | Un'azione del visitatore dentro il widget. Con data-layer, viene inviata anche a window.dataLayer come kadens_item_click. |
kadens:checkout-open | { widget, ...props } | Un'azione del visitatore dentro il widget. Con data-layer, viene inviata anche a window.dataLayer come kadens_checkout_open. |
kadens:checkout-complete | { widget, ...props } | Un'azione del visitatore dentro il widget. Con data-layer, viene inviata anche a window.dataLayer come kadens_checkout_complete. |
kadens:powered-by-click | { widget, ...props } | Un'azione del visitatore dentro il widget. Con data-layer, viene inviata anche a window.dataLayer come kadens_powered_by_click. |
kadens:checkout-completed | { widget, orderRef, kind, amountMinor, currency } | Un acquisto è stato completato. L'importo è in unità minori (centesimi per EUR o USD). Con meta-pixel, invia anche un Purchase al tuo Meta Pixel. |
<kadens-widget handle="your-username" widget="your-widget-id" data-layer></kadens-widget>
<script>
document.addEventListener('kadens:checkout-completed', (event) => {
const { orderRef, amountMinor, currency } = event.detail;
gtag('event', 'purchase', {
transaction_id: orderRef,
value: amountMinor / 100, // amounts arrive in minor units (cents)
currency,
});
});
</script>Aggiungi l'attributo meta-pixel. Non serve altro se la tua pagina carica già il pixel.
<kadens-widget handle="your-username" widget="your-widget-id" meta-pixel></kadens-widget>Il pagamento avviene dentro il widget, in una finestra sicura sopra la tua pagina. Gli acquirenti non lasciano il tuo sito web e non hai bisogno di una tua configurazione di pagamento.
Gli acquirenti possono pagare con solo la loro email, oppure accedere al loro account Kadens dal widget.
Il pagamento si apre in una nuova scheda.
| Problema | Soluzione |
|---|---|
L'area del widget è vuota | Il tuo sito web quasi sempre manca dai tuoi siti web consentiti. Aggiungi l'indirizzo esatto che vedi nel browser, incluso www se lo ha. |
Il codice sparisce dopo il salvataggio | Alcuni strumenti di creazione siti rimuovono gli script. Usa invece il codice iframe: apri Avanzate nella scheda Installa e scegli iframe. |
Il tuo strumento non accetta codice | Alcuni strumenti di creazione siti accettano codice personalizzato solo su un piano a pagamento. La guida di ciascuno strumento qui sopra indica se è il tuo caso. |
Vedi ancora la vecchia pagina | Pubblica di nuovo il tuo sito web e ricarica la pagina. Alcuni strumenti mantengono una vecchia copia per qualche minuto. |
È stato utile?