Sendinblue iframe code in ICON Theme einbetten

[bohoatheart]

Hallo zusammen,

ich habe eine Frage, auf die ich seit 2 Tagen eine Antwort suche. Eventuell kann mir von euch jemand helfen.

Aufgrund der DSGVO habe ich mich dafür entschieden, die Newsletter SignUp Form über Sendinblue zu erstellen. Formular ist erstellt. Jetzt müsste ich es per iframe code in mein Theme (ich habe das ICON Theme gekauft) integrieren und bin komplett verloren. 

Sobald ich es im liquid.theme integriere, landet das Formular statisch im Header oder Footer. Aber ich benötige es ja als Pop Up.

Hat irgendjemand eine Ahnung, was ich falsch mache? 

Ich wäre so unfassbar dankbar. 😄

Liebe Grüße und frohe Ostern!

Vanessa

PS: Vielleicht sollte ich noch erwähnen, dass das Theme eine Pop Up Funktion hat, die auch funktioniert. Leider aber ohne Datenschutz-Check-Kästchen, wodurch ich Sendinblue nutzen wollte.

[Finer]

@bohoatheart ich denke, dass das Formular statisch ist und kein Pop-Up ist. Daher kannst du im Theme Editor einen Abschnitt "Custom Liquid" oder "Liquid" verwenden und dort das Iframe integrieren. Dann kannst du es auf der Startseite auch an die gewünschte Position ziehen.

[bohoatheart]

Hi Finer, danke für deine Antwort. 

Ich möchte das Formular als Pop Up integrieren. Nicht als statisches Formular. 

Sendinblue schreibt, man kann es mit dem iframe als Pop Up integrieren. Hab mal den Screenshot angefügt. 

Liebe Grüße

[Finer]

@bohoatheart probier es mal mit der oben genannten Option aus. Wenn es ein Pop-up ist, sollte das auch funktionieren.

[bohoatheart]

@Finer: Habe einen neuen custom.liquid-Abschnitt erstellt und den iframe eingefügt. Da passiert leider gar nichts. Weiß aber auch nicht, ob ich das richtig einsetze? hab ja keine Ahnung von Codes und wie man die schreibt..  

Habe soeben noch gesehen dass es noch ein mailing-popup.liquid gibt. Habe auch versucht es dort einzusetzen. Dort wird ir das Formular immerhin schon mal auf der Landing Page angezeigt, aber da ist es dann statisch irgendwo am unteren Rand, was ja nicht Sinn der Sache ist. 

[Finer]

@bohoatheart im Code-Editor solltest du besser nicht arbeiten 😐.

Versuche über den Theme-Editor (nicht Code-Editor) zu arbeiten und dort im Custom Liquid Abschnitt, das einzusetzen.

Kannst du den Link oben zum Hilfe-Artikel von Sendinblue zur Verfügung stellen?

[bohoatheart]

@Finer : oh wow.. jetzt verstehe ich endlich, warum dieses custom-liquid Thema als so leicht dargestellt wird, während ich nervös werde 😄 Danke für den Hinweis.. Ergebnis leider das gleiche. Statische Einbindung.

Hier der Hilfeartikel von Sendinblue: Ein Anmeldeformular erstellen - Teil 5: Ein Formular teilen – Sendinblue

[LarissaLALU]

Hallo @Finer, 

ich habe genau das gleiche Problem wie @bohoatheart. Wenn ich den Iframe des Formulars als Custom Liquid einbette erscheint es statisch und nicht als Pop Up. 
Wenn ich den Iframe im CSS Bereichs meines Pop Ups einbette erscheint gar nichts, bzw wird mir ein Error im Iframe gemeldet. 
Hast du eine Idee, wie wir das lösen können? Bzw hast du einen Lösung gefunden @bohoatheart ? 

Liebe Grüße! 

[bohoatheart]

Liebe Larissa,

leider nein. Ich habe irgendwann aufgegeben. Die Lösung wären weitere Apps
gewesen, die ihren Sitz in den USA haben. Was überhaupt keinen Sinn macht,
da dann wieder nicht DSGVO-konform.

Falls du eine Lösung finden solltest: Help! Bitte teile sie mit mir! 😉
Danke und LG
Vanessa

[Gabe]

Hey Alle! 

Das Integrieren eines Iframes als Pop-up in Shopify kann in der Tat etwas knifflig sein, vor allem, wenn man es direkt über den Theme-Editor macht. 

Iframe Code anpassen:

• Stelle sicher, dass der scr im Iframe-Code tatsächlich src ist und es keine Tippfehler gibt.

Einbindung über Liquid:

• Das Pop-Up-Verhalten wird nicht vom Iframe selbst, sondern durch das umgebende JavaScript und CSS bestimmt.
• Wenn dein Theme bereits eine Pop-Up-Funktion hat, kann man versuchen, den Iframe innerhalb dieses vorhandenen Pop-Up-Codes zu platzieren. Man muss dann aber sicherstellen, dass die Trigger- und Anzeigelogik des Pop-ups korrekt funktioniert.

Benutzerdefiniertes JavaScript:

• Man kann ein kleines benutzerdefiniertes Script schreiben, das den Iframe in einem Pop-up öffnet. Hier ein einfaches Beispiel mit jQuery (man muss dafür jQuery im Theme haben, damit dies funktioniert):

$(document).ready(function() {
   var iframeContent = '<iframe width="540" height="305" src="https://c4c456fa.sibforms.com/serve/..."></iframe>';
   
   var popupTrigger = $('#YOUR_TRIGGER_ELEMENT_ID_OR_CLASS'); // Ersetzen Sie dies durch den Selector des Elements, das das Pop-up auslösen soll.

   popupTrigger.click(function() {
       $('body').append('<div class="custom-popup">' + iframeContent + '</div>');
   });
});

Man muss auch etwas CSS im CSS Editor oder in der base.css hinzufügen, um das Pop-up zu gestalten:

.custom-popup {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0,0,0,0.7);
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 9999;
}

Alternative Einbindung in Shopify:

• Füge das JavaScript in eine neue oder vorhandene .js-Datei und das CSS in eine .css- oder .scss-Datei ein.

Wenn du es selber programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. Du kannst ein Backup deines Themes erstellen, bevor man den Code bearbeitet, oder den Code wiederherstellen, falls dies nötig sein sollte. Du könntest auch einen unserer Experten engagieren indem du denen eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.

Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negativ beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das folgende ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!