Clerk.js

Oversigt #

Clerk.js er et JavaScript-bibliotek, der forenkler integrationen af vores API med frontend. Med kun 37,7 kb er det en super letvægtsløsning.

Der er tre fordele ved at bruge Clerk.js:

• Det er robust, da det indlæses asynkront. Det betyder, at resten af siden ikke er afhængig af et API-svar, før den indlæses.
• Det er ofte hurtigere, da din server kan begynde at gengive siden parallelt med, at Clerk.js laver forespørgsler og gengiver resultater.
• Besøgs- og kliksporing håndteres automatisk for alle resultater vist af Clerk. Dette kræver ingen cookies, da vi genererer en hashed værdi baseret på besøgendes IP og useragent, kombineret med en unik butikssalt der roterer hver 30. dag.

Clerk.js indlæses med et initialiserings-script tilføjet i headeren på websitet:

<!-- Start of Clerk.io E-commerce Personalisation tool - www.clerk.io -->
<script type="text/javascript">
  (function(w,d){
    var e=d.createElement('script');e.type='text/javascript';e.async=true;
    e.src='https://cdn.clerk.io/clerk.js';
    var s=d.getElementsByTagName('script')[0];s.parentNode.insertBefore(e,s);
    w.__clerk_q=w.__clerk_q||[];w.Clerk=w.Clerk||function(){ w.__clerk_q.push(arguments) };
  })(window,document);

  Clerk('config', {
    key: 'insert_api_key'
  });
</script>
<!-- End of Clerk.io E-commerce Personalisation tool - www.clerk.io -->

Det indlæser biblioteket fra vores CDN og giver dig adgang til dets funktioner via Clerk objektet, og konfigurerer Clerk.js med API-nøglen så det allerede ved, hvilken Store det laver API-kald for.

Snippets #

Når siden indlæses, scanner Clerk.js den for alle snippets med klassen “clerk”.

Derefter bruger den attributterne fra snippet’et til at opbygge et API-kald, mens API-nøglen hentes fra configen i initialiserings-scriptet.

<span
  class="clerk"
  data-api="recommendations/popular"
  data-limit="10"
  data-template="@clerk-product-template">
</span>

Det visuelle håndteres af Designet, som også refereres i snippet’et.

Clerk.js bruger Liquid designs til at gengive HTML med de data, API’et returnerer. Disse er formateret som scripts, der refereres med deres ID i data-template i dit snippet.

<span class="clerk"
     data-api="search/search"
     data-query="jedi"
     data-limit="20"
     data-template="#clerk-template">
</span>

<script type="text/x-template" id="clerk-template">
  <h1>Søgeresultat for {{ query }}.</h1>
  {% for product in products %}
    <div class="product">
      <h2>{{ product.name }}</h2>
      <img src="{{ product.image }}" />
      <a href="{{ product.url }}">Køb nu</a>
    </div>
  {% endfor %}

  <a href="javascript:Clerk('content', '#{{ content.id }}', 'more', 20);">Indlæs flere resultater</a>
</script>

Snippets kan også forsimples til blot at inkludere en reference til et Element-blok ved at bruge syntaksen data-template="@element-block-id":

<span class="clerk"
     data-template="@product-page-alternatives"
     data-products="[12352]">
</span>

Designs håndteres derefter med Design Editor eller med Liquid HTML kode på en brugervenlig måde fra my.clerk.io.

Dine snippets behøver kun at indeholde klassen clerk, side-specifik information som produkt-ID’er, og en reference til ID’et på et Element-blok i data-template.

Injection #

Injection er en funktion, der giver dig mulighed for at indsætte indholdssnippets på dit website uden at skulle tilføje dem manuelt. I stedet vælger du blot en CSS Selector at injicere snippet’et i, og Clerk.js tilføjer det automatisk ved indlæsning af siden.

Læs mere om Injection her.

Konfiguration #

Clerk.js tillader en række konfigurationer, der ændrer, hvordan det fungerer.

Besøgs-ID’er #

Som standard genererer Clerk.js anonyme besøgs-ID’er, der bruges til at spore sessioner.

Hvis kunder accepterer cookies, kan Clerk.js konfigureres til at placere en persistent cookie med besøgs-ID’et, hvilket muliggør sporing over længere perioder.

Hvis du foretrækker at håndtere session-ID’er manuelt, kan du konfigurere visitor-parameteren som Clerk bruger i API-kald. Alternativt kan du slå session-sporing helt fra ved at sætte visitor til null.

// Persistent besøgs-ID
Clerk('config', {
  visitor: 'persistent'
});

// Custom besøgs-ID
Clerk('config', {
  visitor: 'ABC123'
});

// Deaktiver besøgs-sporing
Clerk('config', {
  visitor: null
});

Sidekontekst #

Konfigurerer Clerk.js med konteksten for den side, en besøgende aktuelt ser. Dette bruges til at berige sporingsdata for personaliseringsfunktioner som Email Triggers, Audience segmentering og Chat kontekst.

Clerk('context', {
  product: null,  // Angiv produkt-ID på produktsider, fx 12345 eller null
  category: null, // Angiv kategori-ID på kategorisider, fx 67 eller null
  page: null      // Angiv side-ID eller type for andre sider, fx 'homepage' eller null
});

Konteksten kan også give de ID’er, der bruges af anbefalingsblokke. Se Element context settings for hvordan du bruger det med Injection.

Sprog #

Konfigurerer Clerk.js med websitets skriftsprog. Dette bruges af Clerk.io til korrekt håndtering af grammatiske regler i Search, samt til at hente de korrekte oversættelser når du bruger multi-language feeds.

Clerk('config', {
  language: 'italian'
});

Accepterede værdier er listet under Supported languages.

Udskift pladsholderværdierne med din platforms logik for at få ID’erne dynamisk. Hver værdi skal sættes baseret på sidetypen den besøgende befinder sig på:

• product: ID på det produkt, der vises på produktsider. Sættes til null på ikke-produkt-sider.
• category: ID på den kategori, der vises på kategorisider. Sættes til null på ikke-kategori-sider.
• page: En side-identifikator eller type-streng på andre sider som forside, kurv eller checkout. Sættes til null, hvis ikke relevant.

Hvis din platform ikke har et specifikt ID tilgængeligt for en sidetype, lad værdien stå som null. Sæt kun værdier for de sidetyper, der er relevante.

Designfunktioner #

Clerk.js understøtter tilføjelse af Formatters og Globals, som kan bruges til at skabe tilpasset javascript-funktionalitet til dine designscopes.

Formatters #

Disse bruges til at påvirke eller ændre attributter. For eksempel, du ønsker måske kun at vise de første 40 tegn af en beskrivelse, eller har behov for at beregne en specifik rabatprocent baseret på kundetype.

Globals #

Disse bruges med frontend-data, som du vil have adgang til i designs. Det kan f.eks. være det resterende beløb før fri fragt, navnet på en logget ind kunde, et valutasymbol eller en valutakurs.

Her er et eksempel på konfiguration af formatters og globals.

Config #

Clerk('config', {
  formatters: {
    uppercase: function(string) {
        return string.toUpperCase();
    }
  },
  globals: {
    currency_symbol: '$'
  }
});

Design #

<div class="name">{{ product.name | uppercase }}</div>
<div class="price">{{ currency_symbol }}{{ product.price }}</div>

Output #

<div class="name">GREEN LIGHT SABER</div>
<div class="price">$1999.99</div>

Email-sporing #

Clerk.js kan automatisk indsamle emails i kundens session til personalisering af email-anbefalinger - også før køb er gennemført.

Aktivér collect_email i din Clerk.js config:

<script type="text/javascript">
  Clerk('config', {
    key: 'insert_api_key',
    collect_email: true
  });
</script>

Med dette aktiveret overvåger Clerk.js email-inputs og sender automatisk log/email, når en besøgende indtaster en emailadresse.

Vil du logge en email manuelt, kan du også tilføje et snippet som dette:

<span class="clerk" data-api="log/email" data-email="EMAIL@EXAMPLE.COM"></span>

Loggede kunder #

Hvis din webshop har kundekonti, kaldes log/email, hver gang en kendt kundes emailadresse er tilgængelig i sessionen — både når de logger ind, og når de vender tilbage til sitet allerede logget ind.

Den simpleste fremgangsmåde er at tjekke ved hver sideindlæsning om en email er til stede, og hvis ja, så lave kaldet. For at undgå unødvendige API-kald gemmes et flag i browser sessionen så den kun affyres én gang per session:

<script type="text/javascript">
  if (!sessionStorage.getItem('clerk_email_logged')) {
    Clerk('call', 'log/email', {
      email: 'CUSTOMER_EMAIL'
    });
    sessionStorage.setItem('clerk_email_logged', '1');
  }
</script>

Udskift CUSTOMER_EMAIL med den aktuelle emailadresse fra din platform. Render kun dette script når der faktisk er en emailadresse tilgængelig — spring det helt over for gæster.

Uden dette kan Clerk.io kun forbinde en besøgendes session til en emailadresse, når der gennemføres et køb. Logger du email så snart den er tilgængelig, sker sammenkædningen øjeblikkeligt, hvilket kræves for at udløse automatiske emails baseret på adfærd, vise personaliserede anbefalinger i emails, og anvende Merchandising-kampagner rettet mod bestemte Audience-segmenter.

Sådan sker sammenkædningen #

Når en email logs, sender Clerk både besøgs-ID og emailadresse til API’et, så de kan forbindes.

Dette gør Clerk i stand til at identificere, hvad den besøgende har gjort i sin sessionshistorik (for eksempel set produkter, klik og søgninger) og forbinde denne adfærd med emailadressen.

Med denne sammenkædning kan de samme adfærdsdata bruges til emailbrug (som udløste og personaliserede emails) og onsite personalisering i anbefalinger til loggede kunder.

Kontekst-reloads #

Kontekst-reloads holder anbefalinger relevante, når en besøgende browser rundt i en single-page app eller headless frontend uden fuld siderefresh. Fx kan en ”Populært i denne kategori”-blok opdatere, når brugeren bevæger sig til en anden kategori.

Dette er aktiveret som standard for blokke, hvis ID’er kommer fra Clerk.js kontekst (id_source: 'context'). Når en kontekstværdi ændres, re-rendrer Clerk.js allerede initialiserede blokke, som bruger denne nøgle, med den nye værdi.

Opdater kontekst #

Kald den offentlige context setter, når den relevante værdi ændres. Fx efter navigation til kategori 276:

Clerk('context', 'category', '276');

Erstat 276 med kategori-ID fra din frontend. Du kan sætte kontekst før eller efter, at en blok er initialiseret. At sætte den samme værdi igen gør intet og udløser ikke et reload.

De overvågede keys er:

Observer sammenligning #

Kontekst-reloads fungerer også, hvis DOM observation er slået fra. De genindlæser blokke, der allerede er på siden, når en værdi ændres, uden ændringer i HTML’en.

DOM observation opdager tilføjet markup, så Clerk.js kan initialisere nytilføjede blokke og gentage injections, hvis target er dukket op. Det aktiveres separat. Kontekst-reloads bruger ikke MutationObserver, timere eller DOM-lyttere.

Kontekst event #

Brug context eventet til at reagere på ændringer i dit eget frontend. Det fyrer ved ethvert faktisk kontekstskifte, også når automatiske reloads er slået fra. Eventen tilhører konteksten og ikke en specifik blok.

Clerk('on', 'context', ({ key, value, previous, context }) => {
  // Opdater din egen UI her om nødvendigt.
});

Slå reloads fra #

Hvis din frontend selv håndterer disse UI-opdateringer, kan du deaktivere automatiske kontekst-reloads med:

Clerk('config', 'context_watch', false);

context eventet er stadig tilgængeligt, selv når automatiske reloads er slået fra.

Navigation #

På single-page apps afvikler popstate og hashchange endnu engang det fælles indholds- og injection-flow. URL-targeted injections kan skabes, når deres matching-tilstande ændres, og kontekst-afledte blokke reloades, når deres værdier ændres.

Opdater Clerk.js konteksten i takt med, at brugeren navigerer, så værdierne matcher nuværende visning. Se single-page app guide for initialisering og manuel rendering.

Begrænsninger #

Blokke hvis ID’er kommer fra sideelementer, samt popups, genindlæses ikke ved kontekstskift.

Under injection bliver en blok uden påkrævet contexts-værdi sprunget over indtil næste injection-pass. Email er undtaget: email-blokke kan oprettes uden email og populere, når den bliver tilgængelig.

DOM observation kan udløse injection-pass der opretter en tidligere sprunget blok. Dette er adskilt fra reload af allerede renderet blok.

Hvert ændret key skaber et ekstra API-kald. Undgå at updatere kontekst i tætte loops eller ved hver routing-hændelse, medmindre værdiskiftene er tilsigtede.

DOM-observation #

Aktivér DOM-observation, når din webshop tilføjer Clerk.io indhold efter at siden er indlæst. Clerk.js overvåger ændringer i sidens struktur (DOM), så den kan opfange indhold, efterhånden som det dukker op.

Du kan aktivere samme adfærd via SPA Auto Detect Changes i my.clerk.io eller ved at tilføje observe_dom: true til din Clerk.js konfiguration.

Eksempel: Sidekurv #

Forestil dig, din webshop kun opretter en sidekurv, når en besøgende tilføjer et produkt. Kurven indeholder en Clerk.io-anbefalingssnip, så denne tilføjes først til siden, når kurven åbnes.

Med timer-baseret tilgang checker Clerk.js for ændringer hvert sekund. Anbefalingssnippetten kan vente til næste check før Clerk.js opfanger den.

Med observe_dom aktiveret, udløser tilføjelsen af sidekurven et check. Clerk.js kan opfange snippen hurtigere og begynde at gengive anbefalingerne, hvilket forkorter ventetiden efter kurven vises.

Andre eksempler #

Samme adfærd hjælper også i andre opsætninger, hvor indhold dukker op uden fuld siderefresh:

• Add-to-cart popup: Webshoppen opretter en popup med Clerk.io anbefalinger, efter et produkt tilføjes. Clerk.js opdager det tilføjede indhold, når popuppen oprettes.
• Lazy-loaded sektion: Webshoppen tilføjer en Clerk.io blok længere nede, efterhånden som brugeren scroller. Clerk.js opfanger den, når den tilføjes.
• Single-page app: En React- eller Vue-app tilføjer Clerk.io indhold, når brugeren navigerer til en anden visning. Clerk.js opdager tilføjet indhold uden at vente på siderefresh.

DOM-observation gælder også for indholdsblokke, email-tilmeldingsformularer og live search.

Aktiver observation #

Vælg én af disse måder at aktivere DOM-observation på:

• Backend: I my.clerk.io, åbn din Store og gå til Settings > Features. Aktiver SPA Auto Detect Changes.
• Kode: Tilføj observe_dom: true til din eksisterende Clerk.js configuration, som vist nedenfor.

Begge muligheder aktiverer samme feature – du behøver kun vælge én.

Clerk('config', {
  key: 'INSERT_PUBLIC_API_KEY',
  observe_dom: true
});

Behold din Stores public API-nøgle og øvrige options i konfigurationen.

Du skal stadig tilføje passende Clerk.io snippet og konfigurere dets Element og Design. At aktivere observation hjælper Clerk.js med at opdage indhold, der tilføjes senere; det tilføjer ikke selv anbefalingsplaceringer på din webshop.

For manuel rendering og custom selectors, se Custom Rendering.

Ressourceforbrug #

Clerk.js grupperer hurtige bursts af DOM-ændringer til ét pass og begrænser fulde pass til én gang hver 500 ms. Observeren gør intet, mens siden er inaktiv og introducerer ingen ekstra API-kald eller netværkstrafik.

Indstillingen er opt-in. Stores, der ikke aktiverer den, bevarer deres nuværende opførsel.

Custom Rendering #

Dette bruges primært med Single Page Apps (SPA), Progressive Web Apps (PWA) og andre applikationer der ikke bruger traditionelle sideloads.

Clerk.js gengiver alle elementer med klassen clerk, men andre klasser kan bruges for custom rendering som custom selectors.

Som standard kræver Clerk, at du kører Clerk("content", "SELECTOR") for at vise indhold, hver gang det skal vises.

Hvis du tilføjer auto_init_custom_selectors: true i config, initialiserer Clerk.js automatisk custom selector-elementer, efterhånden som DOM muterer, såfremt de allerede er blevet renderet med Clerk("content", "SELECTOR") én gang.

Denne adfærd fortsætter, indtil en fuld siderefresh sker.

Debugging #

Clerk.js har en indbygget debug mode, der logger diagnostisk information til browserkonsollen. Den gemmer sin konfiguration i sessionStorage under nøglen __clerk_debug, så debug mode forbliver aktiv ved navigationer i samme browser-session.

Som standard er debug mode aktiveret med level sat til warn og collect til true.

Aktiveringsmetoder #

Der er tre måder at aktivere debug mode på.

Console shorthand

Den simpleste måde er at kalde Clerk('debug') fra browser-konsollen. Den accepterer flere argument-formater:

Clerk('debug');              // Aktiver med defaults
Clerk('debug', true);        // Aktiver
Clerk('debug', false);       // Deaktiver
Clerk('debug', 'on');        // Aktiver
Clerk('debug', 'off');       // Deaktiver
Clerk('debug', 'warn');      // Sæt log-niveau direkte
Clerk('debug', {             // Giv fuldt config-objekt
  enable: true,
  level: 'log',
  group: true
});

Config path

Debug mode kan også konfigureres via det normale config-kald:

Clerk('config', 'debug', {
  enable: true,
  level: 'log',
  collect: true,
  group: true,
  collapsed: false
});

URL hash

Debug mode kan aktiveres ved at tilføje et hash-fragment til URL’en. Dette er nyttigt til at dele debug links med kollegaer:

https://yourwebsite.com/#clerkjs:debug.enable=true&debug.level=warn

Når aktiveret via URL hash, lagres konfigurationen også i sessionStorage under nøglen __clerk_tmp_config.

Config-indstillinger #

Session Storage #

Når debug mode er aktiv, gemmes konfigurationen i sessionStorage under nøglen __clerk_debug. Det sikrer, at debug-indstillingerne bevares mellem sider uden at påvirke andre browserfaner eller passere sessionen.

Consent Management Platforms (CMPs) som Cookiebot kan markere __clerk_debug som et storage-element, der kræver dokumentation. Det er en funktionel nøgle, udelukkende brugt til udviklings-debug. Den indeholder ikke persondata eller sporingsinfo.

For detaljer om strukturen på API debug-responser, se Response debugging.

UI Kit #

Clerk.js indeholder et sæt UI-værktøjer til vigtige elementer, der kan bruges til at forbedre brugeroplevelsen. Disse sparer ofte udviklingstid ved tilpassede setups.

Instant Search #

En central del af en god e-handels-søgeoplevelse er at få resultater med det samme, mens du skriver. Vores Instant Search UI-komponent gør denne oplevelse hurtig og nem at bygge.

Alt Clerk.io-indhold kan i teorien bruges til Instant Search, men det fungerer bedst som en dropdown, der viser søgeresultater.

<span 
  class="clerk"
  
  data-api="search/predictive"
  data-limit="6"
  data-labels='["Instant Search"]'
      
  data-instant-search="INSERT_CSS_SELECTORS_HERE">
  
  <dl class="product-search-result-list">
    <dt>Produkter matcher <i>{{ query }}</i></dt>
    
    {% for product in products %}
      <dd class="product clerk-instant-search-key-selectable">
        <h2 class="product-name">{{ product.name }}</h2> 
        <img src="{{ product.image }}" title="{{ product.name }}" />
        <div class="price">${{ product.price | money }}</div>
        <a href="{{ product.url }}">Køb nu</a>
      </dd>
    {% endfor %}
  </dl>
</span>

Læs mere om Instant Search UI værktøjet her.

Søgeside #

En vigtig del af en stærk søgeoplevelse er at levere gode resultater. Vores Search Page gør det hurtigt og nemt at skabe denne oplevelse.

Search Page gør det muligt at oprette en hel side, der viser de bedst mulige match for en given søgning.

<span 
  class="clerk"
  
  data-api="search/search"
  data-limit="40"
  data-labels='["Search Page"]'
  data-query="INSERT_QUERY_HERE"
  data-orderby="INSERT_SORTING_ATTRIBUTE"
  data-order="asc_OR_desc">>
  
  <div class="product-search-result-list">
    <div>Produkter matcher <i>{{ query }}</i></div>
    
    {% for product in products %}
      <div class="product">
        <h2 class="product-name">{{ product.name }}</h2> 
        <img src="{{ product.image }}" title="{{ product.name }}" />
        <div class="price">${{ product.price | money }}</div>
        <a href="{{ product.url }}">Køb nu</a>
      </div>
    {% endfor %}
    {% if count > products.length %}
        <div class="clerk-load-more-button" 
             onclick="Clerk('content', '#{{ content.id }}', 'more', 40);">
          		Vis flere resultater
    		</div>
    {% endif %}
  </div>
</span>

Læs mere om Search Page UI-værktøjet her.

Kategoriside #

En velstruktureret kategoriside er nøglen til succesfuld e-handel. Vores Category Page gør denne oplevelse hurtig og nem at bygge. Det gør det muligt at oprette en hel side, der viser de bedste resultater inden for en kategori.

<span 
  class="clerk"
  
  data-api="recommendations/category/popular"
  data-limit="40"
  data-labels='["Category Page Grid"]'
  data-category="INSERT_CATEGORY_ID"
  data-orderby="INSERT_SORTING_ATTRIBUTE"
  data-order="asc_OR_desc">
  
  <div class="product-category-result-list">
    {% for product in products %}
      <div class="product">
        <h2 class="product-name">{{ product.name }}</h2> 
        <img src="{{ product.image }}" title="{{ product.name }}" />
        <div class="price">${{ product.price | money }}</div>
        <a href="{{ product.url }}">Køb nu</a>
      </div>
    {% endfor %}
    {% if count > products.length %}
        <div class="clerk-load-more-button" 
             onclick="Clerk('content', '#{{ content.id }}', 'more', 40);">
          		Vis flere resultater
    		</div>
    {% endif %}
  </div>
</span>

Læs mere om Category Page UI-værktøjet her.

Facetter #

Clerk.js understøtter indbygget dynamisk facetteret navigation til både søgning og kategorier. Alle produktattributter, du sender til os, kan bruges som facetter.

Her er et eksempel på grundlæggende brug:

<div id="clerk-search-filters"></div>

<span 
  class="clerk" 
      
  data-template="@search-page" 
  data-query="shoes"
  
  data-facets-target="#clerk-search-filters" 
  data-facets-attributes='["price","categories","brand"]'
  data-facets-titles='{"price": "PRICE-TRANSLATION", "categories": "CATEGORIES-TRANSLATION", "brand": "BRAND-TRANSLATION"}'
  data-facets-price-prepend="€"
  data-facets-in-url="true"
  data-facets-view-more-text="View More"
  data-facets-searchbox-text="Search for "
  data-facets-design="133995">
</span>

Læs mere om Facets UI-værktøjet her.

Exit Intent #

Exit intent popuppen reagerer, når en besøgende forsøger at forlade dit site ved at føre musen tæt på toppen af browseren. Den popper op og viser interessante produkter, hvilket kan omvende en forladende besøgende til en købende kunde.

Enhver Element-blok kan trigges på en besøgendes exit-intent ved at tilføje attributten data-exit-intent="true" til snippen.

<span
  class="clerk"
  
  data-api="recommendations/visitor/complementary"
  data-limit="20"
  data-labels='["Exit Intent / Popup"]'
  
  data-exit-intent="true">
</span>

Læs mere om Exit Intent UI-værktøjet her.

Popup #

UI Kit indeholder et simpelt popup-bibliotek til nemt at skabe brugervenlige popups med ethvert indhold. Alle HTML-elementer på dit website med klassen clerk-popup vises som en popup.

<div id="my-popup" class="clerk-popup">Hello, world!</div>

<script type="text/javascript">
  var my_popup = Clerk('ui', 'popup', '#my-popup');
  
  // vis popup
  my_popup.show(); 
  /* eller */ 
  Clerk('ui', 'popup', '#my-popup', 'show');
  
  // skjul popup
  my_popup.hide(); 
  /* eller */ 
  Clerk('ui', 'popup', '#my-popup', 'hide');
</script>

Læs mere om Popup UI-værktøjet her.

Chat #

Clerk.js eksponerer et JavaScript-interface til at styre Chat-widget’en samt at reagere på samtaleevents. Dette er nyttigt, hvis du vil udløse chat fra din egen UI, give AI’en kontekstddata om, hvad den besøgende laver, eller koble samtaleevents til resten af din frontend.

Hele metode- og event-referencen findes i Chat JS docs.

Åbn Chat fra en brugerdefineret knap #

Hvis du vil udløse Chat fra din egen knap eller UI-element i stedet for den indbyggede launcher, så brug toggle:

<button onclick="Clerk('chat', 'toggle')">
  Brug for hjælp?
</button>

Du kan også bruge open og close hver for sig for at styre tilstanden eksplicit.

Vis Chat kun på specifikke sider #

Som standard er Chat synlig på hele sitet. For kun at vise den på udvalgte sider, deaktiverer du den i din globale config og aktiverer den selektivt:

// I din globale Clerk.js config — skjul Chat overalt
Clerk('config', { key: 'your-public-api-key' });
Clerk('chat', 'disable');

// På sider hvor du vil vise den
Clerk('chat', 'enable');

Send kurv- og sidekontekst til AI’en #

Metoden metadata sender struktureret kontekst til Chat, så AI’en kan give mere relevante svar. Kald den, hver gang den besøgendes kontekst ændres — navigation, tilføj til kurv, opdater præferencer.

// På produktside
Clerk('chat', 'metadata', {
  current_page: {
    page_type: 'product',
    page_id: '12345'
  }
});

// Efter en besøgende tilføjer et produkt til kurven
Clerk('chat', 'metadata', {
  cart: {
    items: [
      { id: 101, name: 'Lightsaber', price: 99.95 },
      { id: 204, name: 'Force Gloves', price: 29.95 }
    ],
    total: 129.90
  }
});

Payload-strukturen er fleksibel — tilføj det kontekst, der er mest nyttig for samtalerne på den side.

Justér AI-adfærd efter hvad den besøgende gør #

Metoden prompt_message sender en systeminstruktion til AI’en. Kunden ser den aldrig, men den ændrer, hvordan AI’en svarer i den aktuelle samtale.

// Efter tilføjelse af produkt — nudg AI’en mod cross-sell
Clerk('chat', 'prompt_message', 'The user just added a Lightsaber to their cart. Suggest complementary products like accessories or protective gear.');

// På checkout — fokusér på bestilling
Clerk('chat', 'prompt_message', 'The user is on the checkout page. Help them complete their order and answer any last-minute questions.');

Overdrag til en menneskelig agent #

Når en besøgende har brug for menneskelig support, fyrer onSupport-eventen med et resume af samtalen. Brug dette til at åbne supportchat og sende konteksten videre, så agenten er opdateret — uden at den besøgende skal gentage sig selv.

Clerk('config', {
  key: 'your-public-api-key',
  chat: {
    onSupport: (e) => {
      // e.summary indeholder et plain-text resume af samtalen hidtil
      const summary = e.summary || 'No conversation summary available.';

      // Eksempel: åbn Intercom og pre-udfyld kontekst
      if (window.Intercom) {
        Intercom('showNewMessage', 'Continuing from AI Chat:\n\n' + summary);
      }

      // Eksempel: åbn Zendesk med forudfyldt kontekst
      if (window.zE) {
        zE('messenger', 'open');
        zE('messenger:set', 'conversationFields', [
          { id: 'clerk_chat_summary', value: summary }
        ]);
      }

      // Skjul evt. Clerk Chat når overdragelse er gennemført
      Clerk('chat', 'disable');
    }
  }
});

onSupport-eventen fires kun, når Contact Support er konfigureret i Chat-indstillingerne, og den besøgende eksplicit anmoder om en menneskelig agent.

Lyt på Chat-events #

Brug event hooks til at integrere Chat-adfærd med resten af din frontend — fx logge beskeder, synkronisere state eller overdrage til en menneskelig agent.

Du kan også registrere event hooks dynamisk efter den indledende konfiguration:

Clerk('chat', 'on', 'message', function(e) {
  console.log('Ny besked:', e.message.text);
});

Læs mere i Chat JS docs.

Udelukkelse af produkter #

Clerk.js har to forskellige måder at udelukke produkter på, afhængigt af om du ønsker at udelukke specifikke ID’er eller undgå at vise dubletter mellem forskellige sliders.

Udelukkelse af specifikke ID’er #

Tilføj blot attributten data-exclude til snippen. Indholdet af data-exclude skal være en liste over de produkt-ID’er, som du ikke ønsker vist, dvs. produkterne i kundens indkøbskurv eller en liste over produkter, de ikke må se.

<span class="clerk"
  data-template="@clerk-complementary"
  data-exclude="[45654, 3244, 12352]">
</span>

Undgå dubletter #

Dette gøres ved at tilføje attributten data-exclude-from på Clerk Block, hvor du vil fjerne dubletten fra. Værdien af attributten skal være en CSS-selector for det eller de andre snippets, som skal undgås dubletter fra.

I eksemplet nedenfor udelukker .clerk-2 ethvert produkt, der findes i .clerk-1, og .clerk-3 udelukker alle produkter, der findes enten i .clerk-1 eller .clerk-2.

<span class="clerk clerk-1"
  data-template="@clerk-banner-1">
</span>
 
<span class="clerk clerk-2"
  data-exclude-from=".clerk-1"
  data-template="@clerk-banner-2">
</span>
 
<span class="clerk clerk-3"
  data-exclude-from=".clerk-1,.clerk-2"
  data-template="@clerk-banner-3">
</span>

Events #

Når du bygger mere tilpassede setups, vil du ofte have brug for at reagere på eller ændre resultaterne fra Clerk før de vises. Det er her Events er nyttige.

Events gør det muligt at opsætte event listeners, der kører kode på specifikke tidspunkter før, under eller efter at Clerk.js har vist sine resultater.

Et almindeligt eksempel er at indlæse brugerdefinerede priser for en logget ind kunde i en B2B-opsætning. En event kan køre umiddelbart efter, at Clerk’s API er færdig med at vise resultater, hvilket gør det muligt at hente brugerdefinerede priser for en kunde og tilføje dem til produktelementerne:

var customer_id = INSERT_CUSTOMER_ID;
Clerk("on", "rendered", function(content, data){
  for (i = 0; i < data.product_data.length; i++) {
      var product = data.product_data[i];
        var custom_price = FETCH_PRICE_FROM_SERVER(product.id,customer_id);
        let price_container = document.querySelector(`[data-clerk-product-id='${product.id}'] .clerk-price`);
        price_container.innerText = custom_price;
    }
})

Læs mere om Events her.

SEO og ydeevne #

Clerk.js muliggør personlige shoppingoplevelser uden at gøre dit site langsommere eller forringe SEO. Ved at bruge client-side rendering og optimeret indlæsning balanceres hastighed, ydeevne og synlighed i søgninger.

SEO og hastighed #

Det er en misforståelse, at JavaScript-funktioner som Clerk.js skader ydeevnen eller SEO. Automatiserede værktøjer overser ofte optimeringer såsom caching, parallellæsning og server-side håndtering.

Fordele ved Clerk.js integration #

• Clerk.js scriptet (≈ 37 - 38 KB) indlæses asynkront, så dit site kan gengives mens Clerk initialiseres.
• Clerk-elementer gengives på klientsiden, hvilket betyder, at din basale HTML forbliver cachebar, og dynamiske komponenter indsprøjtes først efter load.
• Dette muliggør effektiv server-side caching og ikke-blokerende indlæsning af Clerk.js-assets.

Ydeevnepåvirkning #

• Clerk.js er letvægts og asynkron, hvilket typisk kun medfører minimal påvirkning af sideindlæsningstiden.
• Den reelle ydeevnepåvirkning stammer oftest fra ekstra billeder, der vises i anbefalinger, ikke selve scriptet. For at minimere påvirkningen:
  • Brug billeder i passende størrelse og effektive formater som WebP.
  • Tilpas størrelsen på billeder til visningsdimensionerne (fx 400×400 px → 420×420 px maks).
• For at undgå layoutskift (CLS) bør du reservere plads til indsprøjtet Clerk-indhold.

Fx:

.clerk-slider-wrapper {
  min-height: 300px; /* juster efter behov */
  width: 100%;
}

SEO-overvejelser #

Forståelse af, hvordan Clerk.js interagerer med søgemaskiner, hjælper dig med at sikre, at din implementering både understøtter brugeroplevelsen og søgebarhed.

Links og crawlbarhed #

• Clerk.js indsprøjter anbefalingslinks dynamisk på klientsiden.
• Disse links kan forbedre intern linking ved at forbinde relaterede sider, hvis søgemaskiner gengiver og følger dem korrekt.
• Da de indsprøjtes via JavaScript, bør du verificere, hvordan søgemaskine-crawlere gengiver og fortolker dem.
• Korrekt crawlbare links kan forbedre crawlbarheden og gøre det muligt for søgemaskiner at opdage og indeksere flere sider.

PageRank-fordeling #

• Når søgemaskiner kan crawle dem, kan Clerk.js-links hjælpe med at fordele link equity (PageRank) på vigtige sider.
• Dette understøtter forbedret synlighed og rangering af produkt- og kategorisider.

Observerede fordele #

• Korrekt Clerk.js-integration kan korrelere med stærkere interne linkstrukturer, hvilket kan understøtte bedre synlighed i søgeresultater.
• Clerk.io dashboards giver analyser af ordrepåvirkning, konverteringsløft og omsætningsbidrag fra Search, Recommendations, Email og Audience-funktioner.

Anbefalede best practices #

1. Optimer billeder (WebP-format, korrekt opløsning).
2. Reserver layoutplads til dynamiske elementer for at forhindre layoutskift.
3. Overvåg reelle metrics i stedet for kun at stole på automatiserede scores. Brug Clerk’s dashboards til at evaluere effekt på tværs af kanaler.