Créer un site > Centre d'aide > Ajouter un widget à son site

Intégrer un module code sur son site web

Temps estimé : 5 minutes

Prérequis : Avoir demandé l'activation du module Code de votre site internet sur le Live Chat

Étape 1 : Mettre en place une ligne de code informatique dans l'éditeur de site

Commencez par cliquer sur l’onglet Module à droite de votre page.

Dans la liste des modules proposés, sélectionnez le module Code et faites-le glisser dans votre haut de page, ou votre bas de page.

⚠️ L'éditeur de site Orson accède le HTML, le CSS ou les programmes en Javascript. Ces programmes ajoutés via du code supplémentaire ne doivent pas entrer en contradiction avec ceux déjà présents dans l’éditeur Orson. Si tel est le cas, les programmes ajoutés par l’utilisateur sont supprimés.

Étape 2 : Insérez du code dans les modules

Après avoir inséré le module Code aux emplacements souhaités, vous devez copier et coller la ligne de code correspondante à la fonctionnalité recherchée.

Selon l’effet que vous voulez sur votre site web, vous devrez renseigner des lignes de code différentes.

Nous allons voir la démarche à suivre pour plusieurs cas de figure.

Créer une landing page

Une landing page est une page isolée du reste du site. Elle sert uniquement à la conversion de l’utilisateur. Elle ne comporte ni haut de page, ni bas de page.

Pour créer une landing page, vous devez donc indiquer via une ligne de code à l’éditeur qu’il ne doit pas faire figurer de header ou de footer. 

Pour cela, vous devez :

• Cliquer sur la vignette de la page concernée,
• Cliquer sur "...",
• Cliquer sur “Référencement (SEO)”

Dans la zone “Code HTML/JS/CSS à afficher en bas de page”, vous devez indiquer cette ligne de code :

Rendre cliquable un numéro de téléphone

Pour rendre un numéro de téléphone cliquable, commencez par insérer le module Code à l’emplacement du numéro de téléphone.

Ensuite, copiez et collez cette ligne de code en l’adaptant à votre numéro :

<div id="header-phone"><a href= "tel:+0102030405"> 01 02 03 04 05</a></div>

Si vous souhaitez centrer, aligner à gauche, ou aligner à droite votre numéro, vous pouvez également utiliser le code :

• “center” : le numéro sera centré.
• “right” : le numéro sera à droite.
• “left” : le numéro sera à gauche.

Par exemple, si vous voulez placer votre numéro sur la gauche, la ligne de code sera celle-ci :

<div id="header-phone" class="text-left"><a href= "tel:+0256546920"> 02 56 54 69 20</a></div>

Enfin, vous pouvez aussi modifier la taille de votre numéro en utilisant les codes Hn. Plus la variable “n” est grande, plus votre texte sera petit.

Par exemple, le code H5 implique une taille de police plus petite que le code H4. Votre ligne de code ressemble donc à :

<div id="header-phone"><h5><a href= "tel:+0256546920"> 02 56 54 69 20</a></h5></div>

Une fois la ligne de code renseignée, cliquez sur “Ok” et publiez votre mise à jour.

Rendre cliquable un mail pour ouvrir un éditeur d'email

Comme pour le numéro de téléphone, vous devez placer le module Code dans le bloc comprenant votre adresse mail.

Puis, vous devez coller cette ligne de code :

<a href="mailto:votre adresse mail">le texte de votre bouton cliquable </a>

Après avoir ajouté la ligne de code personnalisée avec votre adresse mail et le texte de votre bouton, cliquez sur “Ok”.

Connecter un gestionnaire d'email

Commencez par vous créer un compte auprès d’un partenaire de gestion d’email - comme Gmail, par exemple - si cela n’est pas déjà fait.

Le gestionnaire vous demandera de renseigner un code dans l’environnement Orson afin de vérifier que vous êtes bel et bien propriétaire du nom de domaine.

Vous devez sélectionner le DNS Manager approprié. Pour cela, cochez “Tukows” ou “Open SRS” dans le gestionnaire de mail, et optez pour la méthode TXT.

Le gestionnaire vous fera parvenir un élément textuel à nous communiquer via le Live Chat.

Afin que la démarche soit effective, comptez minimum 12 heures.

Nous faisons notre maximum pour nous en charger dans les plus brefs délais !