Custom HTML-block i e-posteditorn

Översikt

Det nya Custom HTML-blocket i Rule-editorn är en stor uppgradering som ger dig full kontroll över hur du hämtar och visar data från vilken webbsida som helst.

Tidigare kunde Rule endast hämta:

Bild
Titel
Beskrivning
Länk

Med det nya Custom HTML-blocket kan du nu hämta all tillgänglig metadata — så länge webbplatsen tillhandahåller den.

Om datan finns på sidan kan Custom HTML-blocket hämta den.

Var hittar jag Custom HTML-blocket

Öppna e-posteditorn
Titta i panelen till höger under “Elements”
Dra in HTML-blocket i din layout
Släpp det där du vill att det dynamiska innehållet ska visas

Hur du öppnar HTML-editorn

När du har lagt till HTML-blocket i din mall, klicka på det en gång så att det markeras.

I panelen till höger klickar du på:

Edit code → Detta öppnar HTML-editorn där du kan klistra in din egna snippet och lägga till OG/Schema-platshållare.

Så här ser det ut:

Vilken data kan hämtas?

Custom HTML-blocket kan läsa all metadata som finns tillgänglig på en webbsida, inklusive:

Produktnamn
Pris och ordinarie pris
Rabatter
Betyg
Lagerstatus / tillgänglighet
Produktattribut
Anpassad metadata från tredjepart (t.ex. product:rule*)
Open Graph-data
Schema.org-strukturerad data

Om webbplatsen exponerar metadata via:

Open Graph (OG)
Produktmetadata-taggar
Schema.org JSON-LD
Egna meta-taggar

…kan Rule hämta den och automatiskt fylla din HTML med rätt värden.

Hur det fungerar

När du drar en URL till ett Custom HTML-block gör Rule följande:

Hämtar sidans metadata
Tolkar datan och bygger en JSON-struktur
Letar efter placeholder i din HTML
Fyller i rätt värden automatiskt och dynamiskt

Du styr mappningen genom att använda:

data-og-property="Target:Source"
data-schema-property="Target:Source"

Detta säkerställer ett förutsägbart och flexibelt beteende.

Example HTML Block

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

  <a data-og-property="href:url">
    <img data-og-property="src:image;alt:title" style="max-width:70%;height:auto;">
  </a>

  <h2 data-og-property="textContent:title">Title placeholder</h2>

  <p data-og-property="textContent:content">Description placeholder</p>

  <p data-og-property="textContent:product.rulesalesprice">Price placeholder</p>

  <p data-schema-property="textContent:aggregateRating.ratingValue">Rating placeholder</p>

</div>

När du drar in en URL i editorn fylls blocket automatiskt med:

den riktiga produktbilden
det riktiga produktnamnet
beskrivning
pris
betyg

Requirements

För att Custom HTML-blocket ska kunna hämta data måste webbsidan innehålla metadata i minst ett av följande format:

Open Graph-taggar (og:title, og:image, etc.)
Produktmetadata (product:rulesalesprice, etc.)
Schema.org JSON-LD (offers, aggregateRating, etc.)
Egna meta-taggar (namespace:key-format)

Om metadata finns → Rule kan hämta den.

Om inte → kan en utvecklare enkelt lägga till metadata på sidan.

Sammanfattning

Det nya Custom HTML-blocket gör det möjligt att:

✔ Hämta vilken metadata som helst från en webbsida

✔ Bygga dynamiska produktmoduler och artikelpreviewer

✔ Klistra in externa HTML-widgets (t.ex. HelloRetail, Flowbox)

✔ Återanvända samma block för olika produkter/URL:er

✔ Designa avancerade layouter utan kodning

Detta låser upp en helt ny nivå av flexibilitet och anpassning i Rule.