OnOffice-E-Mail-Vorlagen: Richtige Link-Buttons in E-Mail-Vorlagen

In den Standard-Vorlagen von onOffice werden die Links leider immer nur als langweiliger unterstrichender Text angezeigt. Wie du daraus einen richtigen Button machst, zeige ich dir in den folgenden Schritten.

Vorab-Bemerkung

Um die vorgefertigten E-Mail-Vorlagen von OnOffice abzuändern und die Änderungen auch zu verstehen, sind Grundkenntnisse in HTML und CSS sicherlich hilfreich. Du kannst aber auch veruschen “stumpf” der Anleitung hier zu folgen ohne Vorkenntnisse. Ich empfehle dir hier das 1. und 2. Kapitel des kostenlosen Programmierkurs “FreeCodeCamp.org“. Für den HTML-Teil des Code-Camps benötigst du ca. 1,5 Stunden, für den CSS-Teil ca. 3 Stunden. Eine Zeitinvestition, die sich wirklich für jeden OnOffice-Administrator lohnt! Darüber hinaus weißt du danach, wie eine Website eigentlich aufgebaut ist und kannst eigene Design-Anpassungen in OnOffice-E-Mail-Vorlagen vornehmen.

– Öffne die E-Mail-Vorlage in der Quellcode-Ansicht und ergänze diese um den folgenden rot markierten Bereich. Zwischen den Zeichen “/*” und  “*/” habe ich Kommentare eingefügt, was der Code-Abschnitt einstellt, sodass du diese Parameter selber für deine Unternehmensfarben und Schriftart anpassen kannst.

<title></title>
<meta charset="utf-8" /><meta content="width=device-width, initial-scale=1" name="viewport" /><meta content="IE=edge" http-equiv="X-UA-Compatible" />
<link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet" />
<style type="text/css">/* CLIENT-SPECIFIC STYLES */
body, table, td, a{-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;} /* Prevent WebKit and Windows mobile changing default text sizes */
table, td{mso-table-lspace: 0pt; mso-table-rspace: 0pt;} /* Remove spacing between tables in Outlook 2007 and up */
img{-ms-interpolation-mode: bicubic;} /* Allow smoother rendering of resized image in Internet Explorer */

/* DOWNLOAD-BUTTON-STYLES EINGEBAUT VON JOHANNES */

.downloadButton {
background-color:#c69c31; /*Button-Farbe als CSS-Farb-Code (#c69c31 = Möllerherm-Gold */
display:inline-block;
cursor:pointer;
color:#ffffff; /*Schrift-Farbe als CSS-Farb-Code (#ffffff = weiss)*/
font-family: 'Comfortaa'; /*Schriftart*/
font-size:15px; /*Schriftgröße*/
font-weight:bold; /*Schrift in fett darstellen*/
padding:12px 50px;
text-decoration:none;
}
.downloadButton:hover {
background-color:#0bac6c; /*Button-Farbe, wenn man mit dem Cursor über den Button fährt (#0bac6c = grün) */
}

/* RESET STYLES */
img{border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none;}
table{border-collapse: collapse !important;}
body{height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important;font-size: 16px; font-family: 'Comfortaa', sans-serif !important}
(...)

Einen neuen Button fügst du nun, wie folgt ein:

– Suche dir die passende Stelle im HTML-Code, wo du den Button einfügen möchtest. Wenn du das Makro “_Briefanrede” verwendest, kannst du einfach mit der Tastenkombination Strg + F nach _Briefanrede suchen und dann darunter den folgenden rot markierten Code einfügen

(...)
<td align="left" class="padding-copy" style="padding: 10px 0 15px 0; font-size: 16px; line-height: 24px; font-family: 'Comfortaa', sans-serif; color: _ci_schriftfarbe;">_Briefanrede<br />
&nbsp;
<div style="text-align: center;"><a class="downloadButton" href="_agreementLink(URL)">Expos&eacute; herunterladen</a></div>
</td>
(...)

Zu Erklärung:

1. Der Button beginn mit “<div” und hört mit </div> auf

2. Dazwischen ist der Link eingesetzt. Dieser beginnt mit “<a” und hört mit </a> auf

3. Im Link ist zwischen den Anführungszeichen hinter “href=” der agreementLink für den Exposé-Download eingesetzt. Du kannst hier auch einen festen Link einsetzten (z.B. www.moellerherm-immobilien.de) oder das agreementLink-Makro abändern mit den entsprechenden Parametern aus der Makro-Liste von onOffice.  Wichtig ist, dass du den Parameter URL auf jeden Fall setzt, wenn du das agreementLink-Makro setzt, damit hier wirklich nur der Link-Text von onOffice eingesetzt wird. Darüber hinaus könntest du hier auch andere Felder aus onOffice, die Links enthalten, einsetzten, wie den Link zum 360-Grad-Rundgang oder den Link zum Timum-Terminbuchungs-Tool.

4. Die Zeichenfolge “Expos&eacute; herunterladen” ist der Text, der auf dem Button steht.

5. Wenn du den Button eingesetzt hast, kannst du die E-Mail mit einem Klick auf “Quellcode” auch weiterhin ganz normal weiterbearbeiten.