Klickbare URL-Links zu deinen Bannern hinzufügen

Du kannst deinen HTML-Bannerexporten in Bannerify auf zwei Arten Links hinzufügen: mit einem <a>-Link-Tag um das ganze Banner oder mit klickbaren Links an einzelnen Ebenen deiner Zeitleiste.

Links gelten nur für HTML-Exporte. Beachte, dass dies nur für alle HTML-Exportoptionen gilt und sich nicht auf GIF- oder Videoexporte aus dem Plugin auswirkt.

Eine klickbare URL zum ganzen Banner hinzufügen ​

Um einen Link um dein ganzes Banner zu legen, füge im Bereich für die Exporteinstellungen einen Link in das URL-Feld ein. Dein ganzes Banner wird dann automatisch in ein <a>-Tag gepackt, dessen href auf die URL gesetzt ist, die du im Eingabefeld angegeben hast.

Eine klickbare URL zu einer bestimmten Ebene der Zeitleiste hinzufügen ​

Wenn eine bestimmte Ebene der Zeitleiste klickbar sein soll, klick auf diese Ebene in deinem Figma-Canvas und füge im nativen Figma-Bereich Prototype eine Interaktion Open link hinzu. Wenn du deinen Link in das URL-Feld der Figma-Interaktion einfügst, erhält dieses Element in deinem HTML-Bannerexport automatisch ein Attribut onclick="window.open('https://yourwebsitelink.com', '_blank')".

Gilt nur für Ebenen, die in deiner Bannerify-Zeitleiste sichtbar sind. Beachte, dass dies nur auf Ebenen angewendet wird, die in deiner Figma-Zeitleiste sichtbar sind. Standardmäßig sind das die direkten untergeordneten Ebenen deines Banner-Frames. Optional kannst du über das Plugin verschachtelte Ebenen einbeziehen und bei Bedarf auch diesen verschachtelten Ebenen eine Prototyp-Link-Interaktion zuweisen.

Enabler.exit() an Ebenen der Zeitleiste für DoubleClick-Exporte verwenden ​

Wenn du im Format DoubleClick Studio exportierst, kannst du die Figma-Prototyp-URL einer Ebene der Zeitleiste statt auf eine normale Website-URL auch auf einen Enabler.exit(...)-Aufruf setzen.

  1. Wähle eine Ebene in deiner Zeitleiste aus (zum Beispiel deinen CTA-Button).
  2. Füge im Figma-Bereich Prototype eine Interaktion On click -> Open link hinzu.
  3. Gib im URL-Feld einen DoubleClick-Exit-Aufruf ein, zum Beispiel:
js
Enabler.exit("CTA Exit");
  1. Exportiere dein Banner mit Bannerify im Format DoubleClick Studio.

Bannerify wird dann:

  • diese Ebene an Enabler.exit("CTA Exit") binden,
  • den standardmäßigen Hintergrund-Exit für das ganze Banner (Enabler.exit("Background Exit")) beibehalten,
  • verhindern, dass der Klick auf die Ebene bis zum Hintergrund-Exit durchgereicht wird, damit keine doppelten Exit-Aufrufe entstehen.

Verwende das nur für DoubleClick-Exporte. Für HTML-Formate ohne DoubleClick verwendest du in Prototyp-Links normale Website-URLs (zum Beispiel https://example.com).