Outlook Termine als Anhang in E-Mails versenden

Weiterführend zum Blog-Artikel “Outlook Termine erstellen mit DirectSmile Cross Media” zeigt Ihnen dieser Artikel, wie simpel es ist, Termine für den Outlook Kalender als Anhang in einer E-Mail zu versenden.

Im Grunde haben wir bereits alle Informationen die für das Erstellen der ICS Datei benötigt werden, so dass wir uns direkt dem E-Mailing widmen können.

Fügen Sie Ihrer Kampagne eine E-Mail Seite hinzu, wechseln Sie anschließend in den Einstellungen der E-Mail zum Reiter Misc und klicken Sie auf das grüne Plus um einen Anhang hinzuzufügen.

image

Geben Sie dem Anhang einen aussagekräftigen Namen und klicken Sie danach auf das Datenbank Icon um die notwendigen Zuweisungen vornehmen zu können.

Kopieren Sie den unten stehenden Code und fügen ihn direkt in Ihr geöffnetes Zuweisungsfenster ein. Anschließend passen Sie Serverinformation und Datenbankvariablen an.

'http://your-server.com/getvcf.ashx?date=' + [[Date]] + '&h=' + [[Time]] + 'h&hs=' + [[Duration]] + '&s=' + [[Subject]] + '&d=' + [[Description]] + '&l=' + [[Location]] + '&.ics'

image

Sie benötigen noch einen Button oder Link auf einer Seite Ihrer Webseite, um das Versenden der E-Mail auszulösen. Fügen Sie dem Button die Aktion ‘Send E-Mail’ hinzu und wählen im Datenbank-Zuweisungsfenster die E-Mail aus, die versendet werden soll.

image

Nach dem klick auf den Button ‘Send E-Mail’ wird die E-Mail Terminbestaetigung.html mit der ICS Datei im Anhang versendet.

Beispiel wie es aussehen könnte:

image

 

 

Advertisements

Google Web Fonts in Cross Media Kampagnen verwenden

Der Cross Media Designer bringt von Hause aus nur eine gewisse Anzahl an verfügbaren Fonts mit. Nun kann es aber sein, dass genau der Font der für das Kampagnen Design angedacht war nicht in der Auswahl der Standard Fonts enthalten ist. Durch die Implementierung der Google Web Font in den Cross Media Designer haben Sie die Möglichkeit spezielle Fonts für Ihr Design zu laden. Ich werde Ihnen daher heute zeigen, wie Sie Google Web Fonts Ihrer Kampagne hinzufügen und für ihr Design verwenden.

Bitte beachten Sie, dass Google Web Fonts nur auf Kampagnen Webseiten, mobilen Seiten und in dynamischen Dokumenten verwendet werden können.

 

Google Fonts auf Kampagnen Webseiten

Sie haben an mehreren Stellen im Cross Media Designer die Möglichkeit Google Web Fonts hinzuzufügen. Die einfachste Art ist es über den Reiter ‘GoogleFonts’ einen Web Font zu laden. Klicken Sie auf das grüne Plus in der Auswahl und markieren Sie einen Font der für die Kampagnen Webseite verwendet werden soll.

image

 

Nach dem Bestätigen des ausgewählten Web Fonts wird er der Google Font Liste und der klassischen Font Liste zur Auswahl hinzugefügt.

image

 

Jetzt können Sie wie gehabt ihren Text entsprechend formatieren. Ein kleiner Tipp: Wenn Sie auf mehreren Seiten Ihrer Kampagne den Font benutzen wollen, bietet es sich an, einen Text Style zu erstellen. Diesen brauchen Sie dann nur noch für das jeweilige platzierte Item auswählen. Zum Erstellen eines Text Style wechseln Sie zu dem Reiter ‘Styles’ und klicken auf das kleine ‘+’. Editieren Sie den Text Style und wählen Sie Ihren hinzugefügten Web Font aus.

image

 

Nach dem Bestätigen des erstellten Text Style markieren Sie in Ihrer Kampagnen Webseite ein Item ihrer Wahl und wählen unter ‘Style’ den angelegten Text Style aus.

image

Google Web Fonts einem jQuery Style zuweisen

Sie haben eine neue Kampagnen-Webseite erstellt in der Sie sowohl GoogleFonts für ihre Texte als auch ein bestimmtes jQuery Theme benutzen wollen.

image

 

Damit das ausgewählte jQuery Theme, welches auch die Schriftart u.a. von Buttons bestimmt, den selben GoogleFont benutzt, müssen Sie das jQuery Theme entsprechend anpassen.

image

 

Wählen Sie im Menü unter Options “jQuery Styles” aus.

image

 

In dem geöffneten jQuery Style Fenster klicken Sie auf den Link “jQuery Theme Roller”.

image

 

Suchen Sie unter “Gallery” ihren jQuery Style aus und editieren ihn.

image

 

In der Auswahl Font Settings fügen Sie den Namen des GoogleFonts an erster Stelle hinzu und klicken anschließend auf ‘Download theme’. Vergeben Sie ihrem Theme einen aussagekräftigen Namen und klicken anschließend auf ‘Download’.

imageimage

 

Wechseln Sie zurück zum Cross Media Designer und wählen Sie unter ‘Add Style’ ihr heruntergeladenes jQuery Theme aus.

image

 

Wählen Sie für die Webseite das neue jQuery Theme aus.

image

 

Nachdem Sie das neu angepasste jQuery Theme der Webseite zugewiesen haben werden alle Items die die Auswahl jQuery zugeschalten haben mit dem richtigen GoogleFont dargestellt.

image

Einbinden von Schriften in DirectSmile Cross Media Webseiten / Embedding Fonts in DirectSmile Cross Media Webpages

Letztens kam die Frage auf wie man hauseigene Fonts, beziehungsweise Fonts eines Auftraggebers, für das Web im DirectSmile Cross Media bereitstellen kann, so dass für alle Besucher der Webseite die gleiche Typografie dargestellt wird.

Um einen TTF oder OTF Font für das Web vorzubereiten muss dieser im ersten Schritt in ein brauchbares Format konvertiert werden. Die gängigsten Formate sind Web Open Font Format (WOFF), Embedded Open Type (EOT) und Scalable Vector Graphics (SVG).

Für das Konvertieren der Fonts habe ich folgenden @font-face Generator benutzt:

http://www.fontsquirrel.com/fontface/generator

Stellen Sie sicher, dass Sie keine Urheberrechtsverletzung begehen, wenn Sie Schriften einbinden.

Wählen Sie einen Font aus und laden Sie die Datei hoch. Nach Bestätigung der Vereinbarung wird der Font in alle gängigen Webformate konvertiert und Ihnen als Download angeboten.

 

Nach dem Herunterladen und Entpacken der Zip Datei importieren Sie die Fonts in Ihre DirectSmile Cross Media Kampagne über den Bereich Content, Auswahl Account.

imageBild1

Um auf jeder Seite Ihrer Kampagne auf das Stylesheet zugreifen zu können, empfiehlt es sich den Style für die Kampagne im Head fest zu hinterlegen. Dazu öffnen Sie den Editor für den Head-Bereich. Diesen finden Sie im Menü Campaign und wählen HTML head.

imageBild2

Bevor Sie den Style einfügen, definieren Sie den Bereich für CSS-Format. Mit <style type=“text/css“> und </style> definieren Sie einen Bereich für die Stylesheet-Formatdefinitionen.
Zwischen dem einleitenden Tag <style...> und dem abschließenden Tag </style> können Sie nun Ihre CSS-Formate definieren. Kopieren Sie den Code aus der Stylesheet.css Datei und fügen ihn ein. Passen Sie den Pfad an, damit der Font beim Aufruf gefunden werden kann. Geben Sie der Font-Family einen Namen und bestätigen Sie die Anpassungen mit OK.

imageBild3

Erstellen Sie einen Stil im Bereich Styles (Bild4) um Ihren Items später dieses CSS zuweisen zu können. Dazu editieren Sie den hinzugefügten Style und ändern den font-family Namen in Example (Bild5), wie in Bild3 definiert.

imageBild4 imageBild5

Platzieren Sie ein beliebiges Layout Item auf Ihrer Seite, indem Sie mit gedrückter Maustaste das Item in die noch leere Baumstruktur (Tree) ziehen.

imageBild6

Selektieren Sie das platzierte Item im Tree und wählen den neuen Style aus. Nun wird der hinterlegte Font automatisch auf Ihrer Seite angezeigt.

imageBild7

 

 

Embedding Fonts in DirectSmile Cross Media Webpages

We recently received a question on how one can make their own in house fonts, respectively fonts from a client, available for the web in DirectSmile Cross Media so that the same typography is presented for all visitors of the webpage.

In order to prepare a TTF or OTF font for the web, it must first be converted into a usable format. The most common formats are the Web Open Font Format (WOFF), Embedded Open Type (EOT), and Scalable Vector Graphics (SVG).

In order to convert the fonts I used the following @font-face Generator:

http://www.fontsquirrel.com/fontface/generator

Make sure that you are not committing copyright infringement when embedding the font.

Select a font and upload the file. After the agreement of terms has been confirmed, the font will be converted into all common formats and be available to you as a download.

 

After you have imported and unpacked the ZIP file, import the fonts in your DirectSmile Cross Media campaign by selecting Account in the Content area.

clip_image001Image 1

In order to access the style sheet on every page in your campaign, it is recommended that you set the style for the campaign in the Head. To do so, open the editor for the Head area. This is located in the Campaign menu under the selection HTML Head.

clip_image002Image 2

Before you insert the style, define the area for the CSS format. With <style type=“text/css“> and </style> you define an area for the style sheet format definitions.
Between the opening tag <style...> and the final tag </style> you can define your CSS formats. Copy the code from the Stylesheet.css file and insert it. Modify the path so that the font may be found when requested. Give the font family a name and confirm the modifications by clicking OK.

clip_image003Image 3

Create a style in the ‘Styles’ area (Image 4) in order to be able to allot your items to this CSS later. Edit the added style and change the font family names to Example (Image 5) as defined in Image 3.

clip_image004Image 4 clip_image005Image 5

Place any layout item on your page by dragging the item onto the empty Tree while pressing the mouse button.

clip_image006Image 6

Select the item that was placed in the Tree and select the new style. Now the added font will automatically be displayed on your page.

clip_image007Image 7

Erstellen einer Slide Show mit personalisierten Bildern

Auf unserer Webseite gibt es nun eine neue Anzeige von personalisierten Vorschau-Bildern welche ausschließlich mit Hilfe des Cross Media Designers erstellt wurde. Die Vorschau der Bilder ist jetzt viel größer, ohne Wasserzeichen und man kann sich nach der Eingabe seines Namens zurücklehnen und in Ruhe die Slide-Show genießen. Es ist eine sehr schöne Idee seinem Kunden die neuesten Sets auf der Firmen-Webseite zu präsentieren. Ein riesiger Vorteil gegenüber der alten Vorschau ist die Pflege der DirectSmile Motive. Durch Drag&Drop können die Sets für die Vorschau einfach ausgetauscht werden. Wie der Aufbau einer solchen Seite funktioniert werde ich Euch heute in diesem Artikel zeigen.
Wie unsere Slide-Show später in etwa aussehen soll, ist hier zu sehen: http://www.imagepersonalization.com/

Was brauchen wir?

Wir benötigen zwei HTML-Seiten für die Slide-Show. Eine ‘Static Home Page’, auf die der Besucher beim Aufruf der Seite seinen Namen eintragen kann und eine ‘Personal Home Page’, welche nur die Aufgabe hat den soeben angelegten Eintrag in der Datenbank zu überschreiben. Weiterhin benötigen wir eine Auswahl an Sets die in unserer Slide-Show platziert werden sollen und eine Datenbank mit nur einer Spalte für den Namen. Mehr ist nicht notwendig.

Nützliche Hinweise vorab

  • Damit alle Preview-Bilder mit der gleichen Auflösung angezeigt werden, sollten Gruppen und platzierte Sets eine feste Höhe und Weite eingestellt haben. Für eine optimale Anzeige habe ich 600px für die Weite und 450px für die Höhe gewählt.
  • Wähle für das erste Bild-Set ein schnelles Motiv, das macht die Slide-Show flüssiger und garantiert dass alle Sets auf dem Server bereits gerendert wurden.
  • Ich empfehle für die Anzeige der Vorschau-Bilder auf hochaufgelösten Sets zu verzichten. Es macht keinen Sinn extrem große Sets in einer Preview-Slide-Show zu verwenden. Es würde unter Umständen das Produktions-system ausbremsen. Abhilfe schafft entweder die DSMI-Autoskalierung oder man lässt die Slide-Show unter einem neu angelegten Designer-Account laufen und transferiert skalierte Sets auf diesen Account. Dabei sollte darauf geachtet werden, dass die Sets nicht kleiner skaliert werden, als die definierte Höhe und Weite der Slide-Show. Es gilt: so groß wie nötig und so klein wie möglich.

Aufbau der Static Home Page

Auf der ‘Static Home Page’ platzieren wir eine Gruppe, richten diese nach unseren Wünschen aus und platzieren darin das Slide-Show Item. In dem Slide-Show-Item befinden sich standardmäßig drei Gruppen in denen sich jeweils ein Text-Item befindet. Diese Gruppen können wir alle mit Strg selektieren und mit der Entf-Taste löschen. Die jetzt leere Slide-Show kann nun per drag&drop mit Sets gefüllt werden.

Als nächstes platzieren wir außerhalb der Slide-Show ein Text-Eingabefeld für die Eingabe des Namen und direkt daneben ein Button oder ein Bild zum Bestätigen der Eingabe. Damit das Eingabe-Menü für die Slide-Show einheitlich aussieht habe ich die Caption für das Eingabefeld gelöscht und ein Text-Item davor platziert in dem ich das Eingabefeld beschreibe.

Bevor wir zu den Zuweisungen der einzelnen Items kommen kopieren wir uns die komplette Page und fügen sie als ‘Personal Home Page’ wieder ein. Damit haben wir beide Seiten für unsere Slide-Show.
image

Definieren aller Item-Zuweisungen

Wir arbeiten uns von oben nach unten durch beide Seiten und beginnen mit der ‘Static-Home-Page’.
Das Textfeld-Item hat die Funktion ‘DataInput’ und soll in das Datenbank-Feld ‘name’ unserer Datenbank schreiben. Die Validation sollte auf ‘NotEmpty’ stehen um zu vermeiden, dass die Eingabe leer ist. Die Message wird bei Fehleingabe dem Benutzer angezeigt und sollte daher aussagekräftig formuliert werden (z.B.: ‘Bitte geben Sie Ihren Namen ein!’).
image

 

Beim Klick auf das platzierte Bild soll ein ‘Submit’ ausgelöst und der eingegebene Name, mit der Funktion ‘Register new user’, in die Datenbankspalte ‘name’ geschrieben werden. Weiterhin löst der Klick ein Seitenwechsel auf die ‘Personal Home Page’ aus, damit die Slide-Show die angezeigten Bilder mit dem übergebenen Namen anzeigt.
image

 

Die Sets die sich auf der ‘Static Home Page’ befinden müssen einen festen Text enthalten, da zu dem Zeitpunkt für den neuen Besucher noch kein Datenbankfeldeintrag in ‘name’ existiert. Ich belasse es bei ‘Smile’.
image

 

Nachdem wir die ‘Static Home Page’ definiert haben können wir uns nun der Personal Home Page widmen. Da sich am Design der Seite nichts ändern soll, müssen wir nur noch ein paar Einstellungen anpassen.
Als erstes entfernen wir die Aktion ‘New User’ von den Items Textfeld und Bild in dem wir im Textfeld Item auf das kleine Männchen image klicken, so dass wir ein Männchen ohne dem ‘New’ erhalten image.
Das Bild soll jetzt ein ‘Submit data’ ausführen um den Datenbankeintrag ‘name’ zu aktualisieren und auf sich selbst verlinken.
image

 

Den Sets weisen wir die Datenbankspalte ‘name’ zu, damit die Bilder mit dem eingegebenen Namen angezeigt werden können.
image

 

Um die Slide-Show testen zu können, speichern wir alles und lassen uns die Vorschau anzeigen. Wenn alle Einstellungen richtig sind sollte die Slide-Show ohne Probleme funktionieren.
http://dsmx2.directsmile.de/WordPress_SlideShow

image

Outlook Termine erstellen mit DirectSmile Cross Media

Sie haben in einer Kampagne Ihre Kunden zu einer bevorstehenden Messe oder zu einem Seminar eingeladen, vielleicht sogar feste Gesprächstermine vereinbart. Nun stellt sich Ihnen die Frage, wie bekommt man die Termine aus der Cross Media Datenbank in den Outlook-Kalender.

Dafür gibt es im DirectSmile Cross Media einen Handler der Ihnen eine *.ics Datei aus den Informationen der Datenbank zusammenbaut und als Link zur Verfügung stellt. Klickt man auf den Link wird die Datei zum Öffnen angeboten. Nach dem Öffnen der Datei wird der Termin in den persönlichen Kalender von MS Outlook eingetragen.

Beispiel-Link:
http://dsmx2.directsmile.de/getvcf.ashx?date=01/02/2012&h=9:00h&hs=33&s=Training:+Cross-Media&d=Cross+Media+Training,+Mr.+Fechner&l=Berlin;+Alt-Moabit+60

Zur Veranschaulichung habe ich eine kleine Beispielkampagne gebaut, in der durch die Eingabefelder alle Termininformationen abgefragt werden. Nach dem Klick auf “create appointment” wird ein Link bereitgestellt, der die ics Datei für den Outlook Kalender bereithält.

zur Beispielkampagne

Wie funktioniert das Ganze?

Sie platzieren ein Link-Item im Cross Media Designer und wechseln zu “External” Link.

image

Die URL muss wie folgt aufgebaut sein:

http://your-server.com/getvcf.ashx?[Parameter]

Parameter:

Parameter Beschreibung
date= Datum in amerikanischem Format mm/dd/yyyy
&h= Startzeit in hh:mm
&hs= Dauer in h (Eingabe als Dezimalzahl möglich, also 2.5 für zweieinhalb Stunden)
&s= Titel/Betreff
&d= Beschreibung
&l= Ort

image

Diese Werte können auch für jeden Kunden variabel aus der Datenbank ausgelesen werden. Dafür ist es wichtig, dass die Werte das korrekte Format haben (siehe Tabelle oben). In unserem Beispiel benutze ich folgende Datenbankspalten:

Werte:

Werte Beschreibung
[[Date]] für das Datum
[[Time]] Beginn Termins
[[Duration]] Dauer des Termins
[[Subject]] Titel/Betreff
[[Description]] Beschreibung
[[Location]] Ort

Dadurch ergibt sich folgende URL:

http://your-server.com/getvcf.ashx?date=[[Date]]&h=[[Time]]&hs=[[Duration]]&s=[[Subject]]&d=[[Description]]&l=[[Location]]

Hinweis: Bei Kombinationen von festem Text und Datenbankvariablen müssen Leerzeichen durch ein “+” Zeichen ersetzt werden, z.B.:

&s=Meeting+[[Subject]]

http://your-server.com/getvcf.ashx?date=[[Date]]&h=[[Time]]&hs=[[Duration]]&s=Meeting+[[Subject]]&d=[[Description]]&l=[[Location]]