Tutoriel avancé - Nous n'offrons qu'une assistance de premier niveau sur l'utilisation de la plateforme et de ses fonctionnalités. La conception personnalisée, le codage personnalisé et les intégrations de tiers ne sont inclus dans aucun de nos plans.
Injection CSS dans votre compte White Label
Vous pouvez intégrer vos propres règles CSS pour peaufiner l'aspect et la convivialité de votre compte White Label Inject Custom Code > Header of your Branding section.
Section d'injection CSS dans l'en-tête
Exemples de règles CSS
Masquer des éléments de l'interface utilisateur pour un ou plusieurs utilisateurs spécifiques
Vous pouvez masquer des éléments/options pour un utilisateur spécifique de votre instance White Label via CSS. Vous devez cibler l'élément et ajouter à la règle la classe ".user-{nom d'utilisateur en minuscules}".
L'exemple ci-dessous masque l'option "Code QR multi-pays" pour l'utilisateur "John Doe".
<style>.user-john_doe #qr-menu-multi {display:none;}</style>
.user-john_doe #qr-menu-multi {
display:none;
}
</style>Remplacer le logo de l'utilisateur supplémentaire
Vous pouvez utiliser le logo de votre client sur un compte supplémentaire d'un plan White Label. Il vous suffit de télécharger le fichier image dans la section Média, de copier l'URL de l'image et d'ajouter le code suivant dans la section Branding > Injecter un code personnalisé > En-tête.
<style>.user-***usernamehere*** .branding-logo a img {
content: urlhttps://qr.yoursubdomain.com/l/media?f=ce679cb3feec6acbddb537bdab16a679&fullsize=14;}
</style>Cacher la boîte des modèles communs
Vous êtes une grande organisation, vous avez créé vos propres modèles et vous ne voulez pas que vos utilisateurs utilisent des modèles non approuvés. Il vous suffit d'ajouter la règle suivante à votre section Branding > Injecter du code personnalisé > En-tête.
<style>
[role="user"] #admin-templates-block,
[role="user"] #admin-templates-searchbox {
display: none;
}
</style>Vous pouvez supprimer [role="user"] pour masquer le bloc des modèles communs aux administrateurs et aux utilisateurs.
Redimensionner le contenu d'une carte de visite
Il se peut que vous souhaitiez utiliser une carte de visite uniquement pour afficher une série de boutons d'appel à l'action. Dans ce cas, si vous n'ajoutez pas de contenu, cette zone apparaîtra vide et prendra trop de place.
Vous pouvez ajuster la hauteur minimale du bloc de contenu en ajoutant la règle CSS suivante dans votre section Carte de visite > Image de marque ou en l'utilisant dans un modèle CSS.
<style>
#content {
/* Eliminates the minimum height of the content section*/
min-height: unset;
}
</style>IDÉE : Le champ "À propos de moi" de la carte de visite peut être utilisé pour ajouter du contexte à la page d'atterrissage. Vous pouvez également utiliser
Injection de code JS dans votre compte White Label
Si vous souhaitez aller plus loin et ajouter vos propres contenus et fonctionnalités à votre instance, vous pouvez intégrer vos propres scripts JS ou jQuery dans la section Injecter du code personnalisé > Pied de page de votre section Branding.
Exemples de scripts
Les exemples suivants peuvent être complétés et adaptés à vos besoins :
Le code suivant ajoutera un lien à la barre latérale des utilisateurs de votre compte White Label
$document.readyfunction{
$"body[id^='uuser-'] div.menu ul.sub-menu".append
"<li class='li-menu-extra'>
<a class='gray' href='https://google.com'>
<span class='qr-api-user'>My link</span>
</a>
</li>";
};Ajouter un lien à la barre supérieure de votre utilisateur
Le code suivant ajoutera un lien à la barre supérieure des utilisateurs de votre compte White Label.
$document.readyfunction{
$"body[id^='uuser-'] a.account".after
"<a href='https://google.com'>My link</a>";
};Ajouter un lien au pied de page
Le code suivant ajoutera un lien au début du pied de page des utilisateurs de votre compte White Label.
$document.readyfunction{
$"body[id^='uuser-'] #footer p.privacy".prepend
"<a href='https://google.com'>My link</a>";
};Le code suivant ajoutera un lien à la fin du pied de page des utilisateurs de votre compte White Label.
$document.readyfunction{
$"body[id^='uuser-'] #footer p.privacy".append
"<a href='https://google.com'>My link</a>";
};Déplacez les boutons d'appel à l'action en haut de votre carte de visite.
Vous pouvez ajouter le code suivant dans la section Branding > Custom Landing Page Footer pour modifier l'ordre des éléments de votre carte de visite. Uniquement disponible sur les plans White Label.
<script>
$".businesscard-container #footer".insertBefore".businesscard-container #main";
</script>
<style>
#footer {margin:unset;
padding:5px 0;}
</style>Lorsque vous vous connectez en tant qu'administrateur d'un compte White Label, notre widget livechat s'affichera en bas à droite de l'écran pour fournir un support de premier niveau. Vous pouvez facilement cacher/désactiver ce widget en entrant le code JS suivant.
<script>
window.Tawk_API.onLoad = function{
window.Tawk_API.hideWidget;
};
</script>