Les widgets externes sont des outils qui te permettent d'afficher le contenu de la communauté directement sur ton site web. En intégrant ces widgets, tu peux mettre en avant le contenu généré par les utilisateurs, les mises à jour et les discussions, ce qui améliore l'engagement des utilisateurs et crée un hub dynamique pour l'interaction communautaire.
Présentation et limitations
La nouvelle intégration du widget est basée sur le nouveau mode headless intégré à la plateforme. Ce widget ne peut être utilisé que pour les chaînes accessibles aux visiteurs et uniquement pour ces types de chaînes :
- Galerie
- Blog
- Association de produits
- Routine
Par défaut, les publications sont ordonnées selon ces critères :
- Validé par l'admin
- Nombre de likes
- Date (décroissant)
👉 Le nouveau widget n'est pas compatible avec l'ancien. Un seul type peut être utilisé à la fois.
Créer un div
Sur la page cible, crée un div avec un id comme ceci :
<div id="toky_channel_1280"></div>
👉 Tu le trouveras dans l'url de la chaîne après le "channel/"
Exemple : pour https://[communityname]/app/581/channel/1292, l'channelId est 1292)
C'est ici que le widget sera affiché sur la page, quelques notes :
- Il est important que l'Id de la chaîne ciblée soit présent, n'oublie pas de le remplacer par celui que tu veux.
- Tu dois définir la largeur de ce div car le contenu s'adaptera à cela.
- La hauteur sera calculée côté Toky et ne doit pas être spécifiée.
Insérer la balise JS
À titre d'exemple, dans les étapes suivantes, nous utiliserons ce sous-domaine : community.mywebsite.com
Et cet Id de chaîne : 1280
Veille à les remplacer par ceux que tu veux.
Ajoute le script suivant là où tu souhaites afficher le widget (de préférence à la fin du corps) :
(function() {
//insérer l'ID produit personnalisé ici si nécessaire
var tokyChannelWidget = document.createElement('script');
tokyChannelWidget.type = 'text/javascript';
tokyChannelWidget.async = true;
tokyChannelWidget.src = 'https://community.mywebsite.com/channelwidget/1280/embed.js';
if(window && window.toky_customVars && window.toky_customVars.productId)
{tokyChannelWidget.src += '?productId=' + window.toky_customVars.productId;}
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0])
.appendChild(
tokyChannelWidget);
})();
👉Il est important que l'Id de la chaîne ciblée soit présent, n'oublie pas de le remplacer par celui que tu veux, et de remplacer community.mywebsite.com par le domaine de ta communauté.
Filtres et tri (Optionnel)
Plusieurs filtres et tris peuvent être appliqués sur le widget en fonction de ce que le client souhaite afficher.
Filtres
Comme filtre, tu peux utiliser :
- `comments`: pour choisir entre les publications avec ou sans commentaires
`0` affichant toutes les publications, avec et sans commentaires
`1` affichant uniquement les publications sans commentaires
`2` affichant uniquement les publications avec commentaires - `validatedOnly` : pour afficher uniquement les publications qui ont été validées par un administrateur
`false` affichant uniquement les publications non validées
`true` affichant uniquement les publications validées - `maxDays` : pour choisir uniquement les publications qui ont été créées dans la plage de dates donnée
Le temps doit être donné sous forme de nombre de jours, doit être un nombre. - `categoryId` : pour afficher uniquement le contenu d'une catégorie
- `productId` : pour afficher uniquement les publications étiquetées avec cet Id de produit
L'productId doit être le même que celui donné dans le catalogue des produits.
Tri
Pour le tri, tu peux utiliser :
- `order` : pour choisir entre les publications les plus populaires, les plus récentes ou validées
`0` les publications les plus récentes en premier, ordre chronologique
`1` les publications les plus populaires en premier, celles qui ont le plus de likes en premier
`2` les publications validées en premier, celles qui ont été validées en premier, puis les plus populaires, puis les plus récentes.
Exemple :
window.toky_customVars = {
filters: {
comments: 0,
validatedOnly: true,
maxDays: 90,
categoryId: 3
},
order: 1,
productId: 'ABCD-1234'
}
Options de personnalisation (Optionnel)
Pour personnaliser le widget, va à :
AdminV2 > Paramètres > Personnalisation des widgets externes > Embed.JS
Ici, tu peux utiliser Javascript pour ajouter des personnalisations au widget.
Il ne peut y avoir qu'une seule personnalisation par chaîne, mais la personnalisation peut être différente en fonction de la chaîne.
- Taille du widget
La hauteur du widget est personnalisable (les tailles peuvent être différentes sur mobile/desktop).
window.tokyExternalWidgets.channel_1280.config.desktopWidth = '100%',
window.tokyExternalWidgets.channel_1280.config.desktopHeight = '500px',
window.tokyExternalWidgets.channel_1280.config.mobileWidth = '100%',
window.tokyExternalWidgets.channel_1280.config.mobileHeight = '500px',
- Taille de la popup
En cliquant sur une publication dans le nouveau widget, une popup s'ouvre montrant les détails de la publication.
La taille de la popup peut être modifiée, (les tailles peuvent être différentes sur mobile/desktop).
window.tokyExternalWidgets.channel_1280.config.desktopPopupWidth = '852px',
window.tokyExternalWidgets.channel_1280.config.desktopPopupHeight = '70%',
window.tokyExternalWidgets.channel_1280.config.mobilePopupWidth = '100%',
window.tokyExternalWidgets.channel_1280.config.mobilePopupHeight = '100%',
- Interfère avec la création de l'iframe
Tu peux effectuer certaines actions avant, pendant et après la création et l'affichage de l'iframe en utilisant ces fonctions Javascript :
Avant que l'iframe ne soit créé
window.tokyExternalWidgets.channel_1280.before = function(){
//ajoute ton code ici
}
Pendant la création
window.tokyExternalWidgets.channel_1280.customize = function(){
//ajoute ton code ici
}
Après la création
window.tokyExternalWidgets.channel_1280.after = function(){
//ajoute ton code ici
}
Exemples
Tu peux voir un exemple sur https://community.mywebsite.com
👉Souviens-toi de remplacer community.mywebsite.com par ton domaine et l'Id par l'Id de la chaîne que tu veux).
Routine - Cosmétiques
Galerie - Cosmétiques
Association de produits - Mode
Blog - DIY