Tutorial de Bubble.io - Enviar correos electrónicos con Sendgrid de Twilio

In diesem Video geht es darum, wie man mit Sendgrid von Twilio Emails in Bubble versendet.

Wir nutzen das kostenlose Sendgrid Plugin von Copilot: https://bubble.io/plugin/sendgrid-1484327506287x474510747987607550

Transcripción del vídeo:

Hallo, mein Name ist Chris Strobl, ich bin der Gründer von No Code Germany und ich freue mich heute euch zu zeigen, wie man mit dem E-Mail Service im Bubble Emails versenden kann. Wir legen direkt mal los und gehen als erstes in Bubble. Dort habe ich bereits vorbereitet ein kleines Design. Das besteht im Endeffekt aus einer Input forms. Einmal Multi Line Import und zweimal Input für den Betreff und die E-Mail.

Und wir werden nachher einmal eine Plain Text E-Mail verschicken und dann einmal eine E-Mail basierend auf einem Sendegebiet Template. Als erstes installieren wir ein Plugin. Das Plugin heißt 10°C und ist kostenlos und wurde von Kopilot entwickelt. Dieses Plugin wiederum braucht einen API Keys.

Den API Keys bekommt ihr, in dem ihr euch kostenlos bei 10 Grad erst mal registriert. Sandrine hat vom Pricing ein sogenanntes Modell, wo er die ersten 100 E-Mails pro Tag kostenlos bekommt und dann quasi immer mehr bezahlt, je nach Bedarf. Wir gehen jetzt auf Start for Free. Wir registrieren einen Account.

Hier braucht er ein paar Informationen. Ich will das einmal aus. Wenn ihr nun in Sanskrit registriert seid, dann müsst ihr euch einmal hier eine Singles Sender Identity oder mit einer Domain authentifizieren.

Ich mache das hier kurz. Aufgrund der Spam Regularien und ähnlichem braucht ihr hier auch eine Company Adresse, da natürlich E-Mail Spam strafbar ist und deswegen gibt es hier Regularien. Wir klicken auf Kreide. Und wir sollten jetzt eine E-Mail bekommen, wo wir den Single Sender auch verifizieren.

Als nächstes gehen wir nun in Settings. API Keys. Ihr klickt auf Great API Keys. Full Access unique ID im API Keys einen Namen. Den API Keys seht ihr nun einmal deswegen, kopiert diesen, speichert ihn irgendwo ab. Und diesen API Keys nehmen wir dann nämlich auch und fügen ihn im Plugin hinzu. Anschließend gehen wir nochmal in 10 Grad und gehen ins Zapier Sessions und auf. Anstatt Script Groups.

Der Grund ist folgender Aufgrund von Regularien müsste immer die Möglichkeit bieten, dass sich Leute am Subscribe können von euren Emails und das machen wir mit einer sogenannten ActionScript Strip Group.

Hier erstellen wir grade New Group. Und wir geben dem wiederum einen Namen. Und machen safe. Jetzt bekommt ihr diese Gruppe I, die Nummer, die wir gleich noch benötigen werden. Wir gehen zurück im Bubble auf das Designte und machen jetzt als erstes ein Plain Text Email verschicken Wir klicken auf dem Button Start/edit workflow und weil wir das Plugin installiert haben, sehen wir nun Send grid send plain text Email. Und nun machen wir bei Subject Input betreffs Value from name.

Machen wir Chris. From Nocode Germany Bei E-Mail-Adresse nehmen wir die E-Mail, die bei Sandra hinterlegt ist. Bei Adresse machen wir input A's value E-Mails Value. Und im Bodhi nehmen wir Multi Line Impuls Bodies Value und nun ist wichtig, dass wir noch bei der An Subscribe Group ID die ID einfügen, die wir in Sanskrit hier festgelegt haben.

Anschließend machen wir Reset relevant inputs und wir gehen jetzt einmal auf Preview, um das Ganze zu testen. Plain Text Email verschicken.

Und wir sollten nun im E-Mail-Postfach eine E-Mail bekommen und ihr seht nun, wie wir diese E-Mail bekommen haben, die übersendet geschickt wurde von Chris from No Code Germany unser Betreff und auch die Adresse und Ähnliches. Der anzapft Script Link ist nun dazu da, dass wir quasi Compliance sind mit denen Spam Regularien. Als nächstes möchte ich euch noch zeigen, wie wir quasi auch unsere eigenen Template Designs in Sanskrit anlegen können, die wir dann über Bubble verschicken können. Ihr geht auf Senden, E-Mail, API Keys und Dynamic Templates. Great Dynamic Template.

Klickt hier drauf Add Version. Und ihr habt nun die Möglichkeit, entweder sendet Designs direkt zu verwenden oder aber euer eigenes Design zu erstellen. Wir gehen hier einmal auf Select Design Editor. Wir nennen das ganze Nocode Germany. Subjekt Machen wir eine Variable.

Und dann gehen wir in Bild und fügen ein Image hinzu. Ich ablauf hier ein Bild, weil ich bereits ausgewählt habe. Wir wählen dieses aus, machen in Image. Und darunter fügen wir einen Textblock ein. Und auch hier im Text machen wir wiederum Variablen, das heißt einerseits high. Und dann darunter einen Text. Ihr könnt hier auch den Fond und Ähnliches einstellen, ich lasse das einfach mal so! Und was bei 10 Grad wichtig ist und das könnt ihr euch natürlich noch mal in den Tutorials von 10 Grad selber anschauen, ist das Variablen in der Regel mit diesen Klammern doppelt klammern dargestellt werden. Wenn ihr nun das Ganze speichert, dann könnt ihr euch im Preview das Ganze mit Testdaten einmal anschauen. Das heißt. Wir machen Subjekt. Doppelpunkt. Und die. Und die. Schließen das wieder und ihr seht nun, wie wir das Subjekt Willkommen bei No Code Germany haben und gleichzeitig hier auch den dynamischen Content.

Wenn wir jetzt zurück im Bubble gehen, dann können wir den Workflow Template E-Mail verschicken, nun verwenden Start/edit workflow und wir gehen wieder auf Plugins und diesmal machen wir es send Email custom und wir sehen schon, dass wir die Template ID hinzufügen müssen. Das heißt, wir gehen einmal hier rein und schauen, welches Template wir haben. Ihr seht, wir haben hier die Template ID. Diese wird kopiert. Wir machen hier Input betreffs Value. Auch hier wiederum ähnlich wie vorher. Ihr gibt die E-Mail-Adresse ein, die hinterlegt ist bei euch. Hier bei To E-Mail wiederum Input To's E-Mails Value.

Und jetzt bei Custom Data müsst ihr den gleichen Syntax verwenden, wie quasi gerade in unserem Test fällt. Das heißt, auf der einen Seite machen wir das Subjekt. Das ist natürlich immer individuell, wie ihr das Template anlegt und wir machen dann insert dynamic data Import. Betreffs Value kommt dem Body und hier machen wir Insert Multi Line Inputs Bodies Value.

Und danach dann die Klammer schließen. Und schließlich brauchen wir wiederum die Anzahl Skype Group ID-Nummer. Das heißt, wir gehen hier wiederum ins Depression anstatt Skype Groups. Kopieren diese Zahl. Und fügen es hinzu. Danach Reset relevant inputs input A's value. Und jetzt testen wir das Ganze noch einmal. Wir klicken auf Template, E-Mail verschicken.

Und gehen dann in das E-Mail-Programm. Wir sehen jetzt, wie wir hier die gleiche Email bekommen haben mit dem Foto und dem dynamischen Content und auch der Möglichkeit, uns hier zu subscribe. Ihr seht, können wir hier aus dem System ein Opt out machen und so konnten wir sehen, wie wir im Bubble zusammen mit Sanskrit Transactions Email schicken, die euer Produkt erheblich verbessern können.

Wenn euch dies Video gefallen habt, klickt gerne auf den Like-Button, subscribed unseren Channel bei Fragen, schreibt gerne in die Kommentare. Ich wünsche euch weiterhin viel Erfolg mit Bubble und auf bald.