Comment utiliser le HTML pour personnaliser une page de destination

Utilisez le HTML pour ajouter des séparateurs, des appels à l'action et plus encore à votre Digital Link

Vous pouvez entièrement personnaliser votre page de destination en utilisant l'éditeur HTML.

Ajoutez-en un à votre page de destination.

HTML 1

Cliquez sur son menu à trois points, puis sur l'icône </> pour passer à la vue HTML.

HTML 2

Voici quelques exemples de ce que vous pouvez ajouter :

Séparateurs

Vous pouvez ajouter des lignes ou des séparateurs entre les différents éléments de contenu.

Ajoutez la chaîne suivante :

<style>
.line {
border-top: 3px solid #000000;
width: 100%;
margin: 0;
}
</style>
<div class="line"><br></div>

Avec « border-top: », vous pouvez définir l'épaisseur de la ligne en pixels.

Avec « solid # », vous pouvez définir sa couleur à l'aide d'un code couleur hexadécimal.

HTML 3

Lien pour appeler un numéro de téléphone

Vous pouvez créer un lien permettant aux utilisateurs de passer un appel directement depuis leur appareil.

Ajoutez au lien (Call us) qui ouvrira l'application téléphone un attribut « href » contenant le numéro de téléphone souhaité. Par exemple :

<a href="tel:+1234567890">Call us</a>

Remplacez « +1234567890 » par le numéro de téléphone correspondant. Le signe « + » indique l'indicatif d'appel international.

Lien pour envoyer un e-mail

Vous pouvez créer un lien permettant aux utilisateurs d'envoyer un e-mail à une adresse spécifique directement depuis leur appareil.

Ajoutez au lien (Send Email) qui ouvrira l'application de messagerie un attribut « href » contenant l'adresse souhaitée. Par exemple :

<a href="mailto:abc@example.com">Send Email</a>

Remplacez « abc@example.com » par l'adresse e-mail correspondante.

Lien pour envoyer un message WhatsApp

Vous pouvez créer un lien permettant aux utilisateurs d'envoyer un message à un numéro WhatsApp spécifique directement depuis leur appareil.

Ajoutez au lien (Contact us on WhatsApp) qui ouvrira l'application WhatsApp un attribut « href » contenant le numéro WhatsApp souhaité. Vous pouvez éventuellement ajouter un message à envoyer (This is a message) après « ?text= ». Par exemple :

<a href="https://wa.me/+1234567890?text=This is a message">Contact us on WhatsApp</a>

Remplacez « +1234567890 » par le numéro WhatsApp correspondant.

Lien vers une partie spécifique

Vous pouvez créer un lien permettant aux utilisateurs d'accéder directement à une section spécifique de votre page de destination.

  1. Ajoutez un attribut « id » à l'élément cible (Section 1). Nous vous recommandons que le nom de l'élément soit identique à l'id (section1). Par exemple :
<a id="section1">Section 1</a>
  1. Ajoutez au lien qui mènera à l'élément cible (Go to Section 1) un attribut « href » utilisant l'id créé à l'étape 1 (#section1). Par exemple :
<a href="#section1">Go to Section 1</a>

Intégrer une vidéo

Vous pouvez afficher des vidéos de YouTube, Vimeo et d'autres plateformes vidéo en ligne sur votre page de destination, à condition qu'elles proposent une option d'intégration (balise « iframe »). Après l'avoir copiée, accédez à votre page de destination et collez la balise « iframe ». Par exemple :

<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO-URL" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

Intégrer une carte Google Maps

Vous pouvez afficher plusieurs cartes Google Maps en recherchant les adresses dans Google Maps, en cliquant sur Partager > Intégrer une carte et en copiant la balise « iframe ». Ensuite, accédez à votre page de destination et collez la balise « iframe ». Par exemple :

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1589980.4936041927!2d-79.46503024375001!3d38.89126619999998!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89b7b798ecb5b2c7%3A0xc7edf0c4a86f75af!2sSmithsonian%20National%20Museum%20of%20Natural%20History!5e0!3m2!1sen!2sar!4v1719328865609!5m2!1sen!2sar" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>