Custom HTML-block i e-posteditorn

Custom HTML-blocket ger dig möjlighet att använda din egen HTML direkt i Rule:s e-posteditor. Med det kan du skapa avancerade och flexibla layoutlösningar.

Du kan även hämta information från en webbsida automatiskt, t.ex. produktnamn, pris, bilder och beskrivningar, så att innehållet uppdateras direkt när du drar in en URL.

⚠️ Observera: Detta är en mer avancerad funktion och kräver kunskap inom HTML, men den ger stor flexibilitet och kontroll över designen.

1. Vad kan du göra med Custom HTML-blocket?

Med Custom HTML-blocket kan du:

Klistra in egen HTML för full designfrihet.
Automatiskt fylla innehållet med data från en webbsida.
Skapa dynamiska produktmoduler, artikelförhandsvisningar eller tredjeparts-widgets (t.ex. HelloRetail, Flowbox, Trustpilot).
Återanvända samma block för olika produkter eller URL:er utan att bygga om.

Exempel på innehåll som kan hämtas från webbsidor:

Produktnamn, pris och ordinarie pris
Rabattinformation
Produktbetyg och recensioner
Tillgänglighet/lagerstatus

Andra metadata som finns på sidan

Exempel HTML Block:

<div style="text-align:center;font-family:Arial, sans-serif;line-height:1.4;">

  <!-- Product image (from og:image) -->
  <a data-og-property="href:url">
    <img
      src="https://via.placeholder.com/1"
      alt="Produktbild"
      data-og-property="src:image"
      style="width:70%;max-width:100%;height:auto;margin:0 auto 16px;"
    />
  </a>

  <!-- Product title -->
  <h2
    data-og-property="textContent:title"
    style="font-size:24px;margin:0 0 8px;"
  ></h2>

  <!-- Description -->
  <p
    data-og-property="textContent:content"
    style="font-size:14px;margin:0 0 8px;"
  ></p>

</div>

2. Så fungerar det

Dra in ett Custom HTML-block i din e-postmall.
Klicka på blocket och välj Redigera kod i högerpanelen.
Klistra in din HTML-kod och lägg till platshållare för de värden du vill fylla automatiskt.

(OBS! Endast om du vill hämta innehåll från webbsida)
Dra in en produkt- eller artikel-URL på blocket genom drag & drop funktionen:
Rule hämtar metadata från sidan och fyller i dina platshållare automatiskt (om du har använt vårt exempel block ovan)

Exempel: Om du drar in en produkt-URL kan blocket automatiskt visa produktbild, titel, pris och betyg. Tänk på att du webbsida måste ha stöd för og:taggar. Om du är osäker på hur det funkar, läs mer här.

3. Vanliga användningsfall

Produktmoduler:
Visa bild, pris, rabatt, recensioner och attribut automatiskt.

Artikel-preview:
Visa rubrik, ingress, publiceringsdatum och featured image.

Tredjeparts-widgets:
Integrera HTML-widgetar från t.ex. HelloRetail, Flowbox, Trustpilot eller Shopify.

Egna sektioner:
Bygg brandade moduler och anpassade layoutlösningar.

4. Tips

Om sidan har metadata i form av Open Graph, Schema.org eller produktmeta-taggar, kan blocket hämta den.
Du kan kombinera flera block för att bygga avancerade layoutlösningar.
Detta block passar perfekt för dynamiskt innehåll som ska återanvändas i flera kampanjer.

5. Sammanfattning

Custom HTML-blocket ger dig:

Full designfrihet med HTML
Automatiskt uppdaterat innehåll från webbsidor
Möjlighet att återanvända samma block för flera produkter/URL:er
Enkel integration av tredjeparts-widgets

Detta är ett avancerat men mycket flexibelt verktyg som gör det möjligt att skapa riktigt kraftfulla och dynamiska e-postkampanjer utan utvecklingsarbete.