Un widget affiche vos événements, billets ou personnes Kadens sur votre propre site web, et les visiteurs peuvent acheter sans le quitter. Vous avez besoin d'un compte Kadens et de l'accès pour modifier votre site web. Créez un widget, autorisez votre site web, puis copiez-collez un court code.
Un widget est une partie de votre page Kadens qui vit dans votre site web. Il en existe trois types :
| Widget | Description |
|---|---|
Événements et billets | Vos prochains événements, avec l'achat de billets directement sur votre site. |
Un événement | La page d'un événement : dates, lieu, description et billets, avec Acheter. |
Personnes | Des cartes de profil des personnes que vous choisissez, reliées à leurs profils publics. |
Cours | Vos cours avec leurs prix, chacun relié à sa page sur votre site. |
Formules et tarifs | Vos formules d'adhésion côte à côte, chacune reliée à sa page d'inscription. |
Planning des cours | Vos prochains cours sous forme d'agenda, toujours à jour. |
Bouton d'achat | Un bouton pour un événement, un cours ou une formule, assorti à votre page. |
Le code que vous collez ne fait que nommer votre widget. Quand vous modifiez le widget dans Kadens (ce qu'il affiche, sa mise en page ou ses couleurs), chaque site web qui l'utilise se met à jour tout seul. Vous n'avez jamais besoin de recoller le code.
Quatre étapes, aucun code nécessaire.
Dans Kadens, ouvrez Intégrations, puis Widgets, et créez-en un. Choisissez ce qu'il affiche et son apparence.
Ajoutez l'adresse de votre site web, comme https://www.example.com. Un widget n'apparaît que sur les sites web que vous autorisez.
Ouvrez votre widget et allez dans l'onglet Installation. Copiez le code qui y est affiché. Il porte déjà votre nom d'utilisateur et votre widget.
Collez le code à l'endroit où vous voulez que le widget apparaisse, puis publiez votre site web. Trouvez votre créateur de site dans les guides ci-dessous pour les étapes exactes.
Un widget ne se charge que sur les sites web que vous ajoutez à votre liste.
Cela protège votre paiement : personne ne peut mettre votre widget sur une page que vous ne contrôlez pas. Votre liste est envoyée aux navigateurs comme une règle de sécurité (frame-ancestors), de sorte qu'un site web qui n'y figure pas n'affiche rien là où le widget devrait être.
| Adresse | Résultat |
|---|---|
https://www.example.com | Autorisé. Un seul site web. Tout chemin ou barre oblique finale que vous saisissez est retiré. |
https://*.example.com | Autorisé. Chaque sous-domaine à un niveau de profondeur, comme shop.example.com. Cela n'inclut pas example.com lui-même ni des niveaux plus profonds comme a.b.example.com : ajoutez-les comme des entrées séparées. |
* | Non autorisé. Cela permettrait à n'importe quel site web sur internet d'afficher votre widget. |
https://*.com | Non autorisé. Un joker a besoin d'un vrai domaine après lui. |
http://www.example.com | Non autorisé. Les sites web doivent utiliser https. |
http://localhost:3000 | Autorisé pour tester sur votre propre ordinateur. http ne fonctionne que pour localhost. |
https://www.example.com/tickets | Enregistré comme https://www.example.com. Tout le site web est autorisé, pas une seule page. Une adresse avec ? ou # est refusée. |
https://203.0.113.7 | Non autorisé. Utilisez le nom de domaine de votre site web. |
Un script et un élément. L'onglet Installation construit ce code pour vous.
Pour tout site qui accepte du code. Ajuste sa hauteur tout seul.
Dans les exemples de cette page, your-username et your-widget-id représentent vos propres valeurs. Copiez votre vrai code depuis l'onglet Installation.
| Attribut | Type | Description |
|---|---|---|
handleRequis | string | Votre nom d'utilisateur Kadens. |
widgetRequis | string | L'id du widget à afficher. |
locale | string | La langue du widget. Quand il est absent, le widget utilise le lang de votre page. |
color-scheme | light | dark | auto | Force les couleurs claires ou sombres pour cet emplacement. Omettez-le pour utiliser le réglage propre du widget. |
title | string | Le nom accessible du cadre du widget, lu par les lecteurs d'écran. Par défaut, Kadens widget. |
data-layer | boolean | Envoie aussi chaque événement du widget vers window.dataLayer, pour Google Tag Manager. |
meta-pixel | boolean | Envoie un événement Purchase à votre Meta Pixel quand quelqu'un termine un achat. Votre page doit déjà charger le pixel. |
Pour les créateurs de sites qui suppriment les scripts. Hauteur fixe.
Choisissez votre créateur de site. Chaque guide indique ce dont vous avez besoin d'abord, où va le code et quoi vérifier.
Vous devez pouvoir modifier les pages de votre site, ou demander à quelqu'un qui le peut de coller le code pour vous.
Par page : collez le code sur chaque page où le widget doit apparaître. Si votre site propose un emplacement pour du code sur toutes les pages (souvent appelé code d'en-tête ou de pied de page), vous pouvez y mettre la première ligne une seule fois et ne coller que la deuxième sur chaque page.
Ouvrez la page publiée dans un nouvel onglet. Le widget apparaît là où vous avez collé le code, en général en quelques secondes.
WordPress auto-hébergé (WordPress.org) fonctionne dans tous les cas. Sur WordPress.com, il faut un forfait payant avec les fonctions d'hébergement : le forfait Free supprime le script et le widget ne s'affichera pas.
Par page : ajoutez un bloc Custom HTML à chaque page ou article où le widget doit apparaître. WordPress n'a pas d'emplacement intégré pour du code sur toutes les pages : collez donc le code en entier dans chaque bloc.
Ouvrez la page sur votre site en ligne, pas dans l'éditeur. Le widget s'affiche là où vous avez ajouté le bloc.
Custom Code nécessite une offre Premium et un domaine connecté. Sans les deux, le widget ne s'affichera pas sur votre site.
Sur les pages de votre choix. Custom Code s'exécute dans la page elle-même, sur votre propre domaine, et le widget apparaît à la fin de chaque page choisie.
Ouvrez la page sur votre propre domaine, pas dans l'aperçu de l'Editor. Le widget s'affiche à la fin de la page.
Vous devez être propriétaire de la boutique ou membre du personnel autorisé à modifier les thèmes dans Shopify admin.
Par modèle : une section ajoutée dans l'éditeur de thème s'affiche sur toutes les pages qui utilisent ce modèle (par exemple, toutes les pages produit). Pour ne l'afficher que sur une page, créez-lui d'abord son propre modèle. Pour toutes les pages, allez dans Online Store › Themes › … › Edit code et collez-le dans layout/theme.liquid juste avant la balise de fermeture du body ; le widget s'affiche alors à la fin de chaque page.
Ouvrez votre boutique dans un nouvel onglet, pas dans l'éditeur de thème, et allez sur cette page. Le widget s'affiche à l'emplacement de la section.
Code Embed ne fonctionne qu'avec un forfait de site payant ou dans un Workspace Core, Growth, Agency ou Freelancer. Sur un site Starter gratuit, le widget ne s'affichera pas.
Par page : placez un Code Embed là où le widget doit apparaître. Pour toutes les pages, collez-le plutôt une fois dans Site settings › Custom code › Footer code, qui s'exécute avant la balise de fermeture du body et nécessite un Site plan payant ; le widget s'affiche alors à la fin de chaque page. Pour le garder dans vos pages, mettez seulement la première ligne dans Footer code et la deuxième dans chaque Code Embed.
Ouvrez le site publié. Dans le Designer, le Code Embed affiche un espace réservé au lieu du widget ; c'est normal.
Les scripts fonctionnent sur les offres Core, Plus et Advanced. Sur l'offre Personal, le widget ne s'affichera pas, et la version iframe non plus.
Par page : ajoutez un bloc Code sur chaque page où le widget doit apparaître. Pour toutes les pages, collez-le plutôt une fois dans le panneau Code Injection des Settings.
Ouvrez la page de votre site en ligne dans une fenêtre privée. Dans l'éditeur, le bloc affiche un espace réservé, car les scripts ne s'exécutent pas dans l'aperçu de l'éditeur.
Vous devez pouvoir modifier le projet Framer.
Par page : placez un Embed là où le widget doit apparaître et collez le code en entier dans chaque Embed.
Ouvrez votre site publié et allez sur la page. Le widget apparaît là où vous avez placé l'Embed.
Vous devez avoir un compte Ghost qui peut publier (Author ou plus). Les Contributors peuvent ajouter la carte mais pas la publier.
Par article ou page : ajoutez une carte HTML là où le widget doit apparaître. Pour toutes les pages, collez-le plutôt une fois dans Settings › Advanced › Code injection › Site footer ; le widget s'affiche alors à la fin de chaque page. Pour le garder dans vos articles, mettez seulement la première ligne dans Site footer et la deuxième dans chaque carte HTML.
Ouvrez l'article ou la page publiés. L'éditeur affiche la carte sous forme de code ; le widget n'apparaît que sur la page publiée.
Vous devez avoir le droit de modifier et publier des pages de site ou des landing pages dans HubSpot.
Par page : collez le code dans le Source code d'un module Rich text là où le widget doit apparaître, ou dans Settings › Advanced › Footer HTML de l'éditeur de page pour l'afficher à la fin de cette page. Pour toutes les pages d'un domaine, allez dans Settings › Content › Pages, choisissez le domaine et collez-le dans Site footer HTML.
Ouvrez la page en ligne. Si le widget manque, rouvrez le Source code du module : si la ligne du script a disparu, HubSpot l'a supprimée.
Modifiez ces réglages dans le studio de widget de Kadens. Votre site web se met à jour tout seul.
| Réglage | Valeurs | Description |
|---|---|---|
Thème | site | kadens | minimal | bold | soft | dark | Un style de départ. Vous pouvez ajuster n'importe quel détail après en avoir choisi un. |
Mode de couleur | light | dark | auto | Clair, sombre, ou auto pour suivre l'appareil du visiteur. |
Couleurs | accent, accentForeground, background, card, text, mutedText, border | Vos propres couleurs pour les boutons, arrière-plans, cartes, texte et bordures. |
Polices | La police de votre site, la police système du visiteur, ou une police du catalogue de polices Kadens. Les polices se chargent à l'intérieur du widget depuis Kadens, jamais depuis Google. | |
Taille du texte | 12 to 22 px | La taille de base du texte du widget. |
Rayon des angles | 0 to 64 px | À quel point les cartes et boutons sont arrondis. |
L'élément du widget envoie des événements DOM à votre page, afin que vous puissiez mesurer les clics et les ventes avec votre propre outil d'analyse.
| Événement | Contenu | Description |
|---|---|---|
kadens:ready | { widget } | Le widget s'est chargé et est visible. |
kadens:widget-view | { widget, ...props } | Une action du visiteur à l'intérieur du widget. Avec data-layer, elle est aussi envoyée vers window.dataLayer sous la forme kadens_widget_view. |
kadens:item-click | { widget, ...props } | Une action du visiteur à l'intérieur du widget. Avec data-layer, elle est aussi envoyée vers window.dataLayer sous la forme kadens_item_click. |
kadens:checkout-open | { widget, ...props } | Une action du visiteur à l'intérieur du widget. Avec data-layer, elle est aussi envoyée vers window.dataLayer sous la forme kadens_checkout_open. |
kadens:checkout-complete | { widget, ...props } | Une action du visiteur à l'intérieur du widget. Avec data-layer, elle est aussi envoyée vers window.dataLayer sous la forme kadens_checkout_complete. |
kadens:powered-by-click | { widget, ...props } | Une action du visiteur à l'intérieur du widget. Avec data-layer, elle est aussi envoyée vers window.dataLayer sous la forme kadens_powered_by_click. |
kadens:checkout-completed | { widget, orderRef, kind, amountMinor, currency } | Un achat s'est terminé. Le montant est en unités mineures (centimes pour EUR ou USD). Avec meta-pixel, il envoie aussi un Purchase à votre 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>Ajoutez l'attribut meta-pixel. Rien d'autre n'est nécessaire si votre page charge déjà le pixel.
<kadens-widget handle="your-username" widget="your-widget-id" meta-pixel></kadens-widget>Le paiement se déroule à l'intérieur du widget, dans une fenêtre sécurisée par-dessus votre page. Les acheteurs ne quittent pas votre site web et vous n'avez pas besoin de votre propre configuration de paiement.
Les acheteurs peuvent payer avec seulement leur e-mail, ou se connecter à leur compte Kadens depuis le widget.
Le paiement s'ouvre dans un nouvel onglet.
| Problème | Solution |
|---|---|
La zone du widget est vide | Votre site web manque presque toujours dans vos sites web autorisés. Ajoutez l'adresse exacte que vous voyez dans le navigateur, y compris www si elle en a un. |
Le code disparaît après l'enregistrement | Certains créateurs de site retirent les scripts. Utilisez plutôt le code iframe : ouvrez Avancé dans l'onglet Installation et choisissez iframe. |
Votre créateur de site n'accepte pas le code | Certains créateurs de site n'acceptent le code personnalisé que sur un forfait payant. Le guide de chaque créateur ci-dessus indique si c'est le cas du vôtre. |
Vous voyez encore l'ancienne page | Publiez à nouveau votre site web et rechargez la page. Certains créateurs conservent une ancienne copie pendant quelques minutes. |
Cet article vous a-t-il aidé ?