Ajouter des liens URL cliquables à vos bannières

Deux façons d’ajouter des liens à vos exports HTML : une balise <a> autour de toute la bannière, ou des liens sur des calques précis de la timeline.

Les liens ne s’appliquent qu’aux exports HTML. Ce réglage s’applique à toutes les options d’export HTML, mais n’a aucun effet sur les exports GIF ou vidéo du plugin.

Ajouter une URL cliquable à toute la bannière ​

Pour ajouter un lien autour de toute votre bannière, collez-le dans le champ URL du panneau des réglages d’export. Votre bannière entière est alors automatiquement placée dans une balise <a> dont l’attribut href correspond à l’URL saisie dans le champ.

Ajouter une URL cliquable à un calque précis de la timeline ​

Pour rendre cliquable un calque de la timeline, cliquez sur ce calque dans votre canevas Figma, puis ajoutez une interaction Open link dans le panneau Prototype natif de Figma. Si vous collez votre lien dans le champ URL de l’interaction Figma, l’attribut onclick="window.open('https://yourwebsitelink.com', '_blank')" est automatiquement ajouté à cet élément dans l’export HTML de votre bannière.

Ne s’applique qu’aux calques visibles dans la timeline de Bannerify. Ce réglage ne s’applique qu’aux calques visibles dans votre timeline Figma. Par défaut, il s’agit des calques enfants directs du frame de votre bannière ; vous pouvez aussi inclure des calques imbriqués via le plugin, puis leur appliquer une interaction de lien de prototype si vous le souhaitez.

Utiliser Enabler.exit() sur des calques de la timeline pour les exports DoubleClick ​

Si vous exportez au format DoubleClick Studio, vous pouvez aussi remplacer l’URL de prototype Figma d’un calque de la timeline par un appel Enabler.exit(...) au lieu d’une URL de site web classique.

  1. Sélectionnez un calque dans votre timeline (par exemple votre bouton CTA).
  2. Dans le panneau Prototype de Figma, ajoutez une interaction On click -> Open link.
  3. Dans le champ URL, saisissez un appel de sortie DoubleClick, par exemple :
js
Enabler.exit("CTA Exit");
  1. Exportez votre bannière avec Bannerify au format DoubleClick Studio.

Bannerify va alors :

  • associer ce calque à Enabler.exit("CTA Exit") ;
  • conserver la sortie par défaut sur l’arrière-plan de toute la bannière (Enabler.exit("Background Exit")) ;
  • empêcher le clic sur le calque de se propager jusqu’à la sortie d’arrière-plan, pour éviter les appels de sortie en double.

À utiliser uniquement pour les exports DoubleClick. Pour les formats HTML autres que DoubleClick, utilisez des URL de sites web classiques dans les liens de prototype (par exemple https://example.com).