Embeds

1

Email Embeds

Basics #

These are used to embed recommendations directly into any email within any email client. It is the easiest and most flexible way to improve existing email flows using Clerks AI.

Embedded email recommendations consist of a Content where you configure the name, product logic and other settings, and a Design that controls the look and feel of the recommendations.

Once you have configured your Content and Design, you can simply copy-paste the embedcode into your email platform, to show results at that placement.

...

Clerk & Seo

1

Clerk.js powers personalized shopping experiences without slowing down your site or hurting SEO. By using client-side rendering and optimized loading, it balances speed, performance, and search visibility.

SEO and Speed #

It’s a misconception that JavaScript features like Clerk.js harm performance or SEO. Automated tools often overlook optimizations such as caching, parallel loading, and server-side handling.

Clerk.js Integration Benefits #

  • The Clerk.js script (≈ 37 - 38 KB) loads asynchronously, allowing your site to render while Clerk initializes .
  • Clerk elements are client-rendered, meaning your base HTML remains cacheable, and dynamic components are injected only after load.
  • This enables efficient server-side caching and non-blocking loading of Clerk.js assets.

Performance Impact #

  • The lightweight and asynchronous nature of Clerk.js typically results in small impact on page load times.
  • Real-world performance hit often stems from additional images rendered in recommendations, not the script itself. To minimize impact:
    • Use appropriately sized, high-efficiency formats like WebP.
    • Resize images to match display dimensions (e.g., 400×400 px → 420×420 px max).
  • To avoid layout shifts (CLS), reserve space for injected Clerk content. E.g.:
.clerk-slider-wrapper {
  min-height: 300px; /* adjust as needed */
  width: 100%;
}

SEO Considerations #

Linking and Crawlability #

  • Clerk.js injects recommendation links dynamically on the client side.
  • These links can improve internal linking by connecting related pages, if the search engines render and follow them correctly.
  • Since they are JavaScript-injected, you should verify how search engine crawlers render and interpret them.
  • Properly crawled links can improve crawlability and allow search engines to discover and index more pages.

PageRank Distribution #

  • When search engines can crawl them, Clerk.js links may help distribute link equity (PageRank) across key pages.
  • This supports improved visibility and ranking of product and category pages.

Observed Benefits #

  • Correct Clerk.js integration can correlate with stronger internal linking structures, which may support improved visibility in search results.
  • Clerk.io dashboards provide analytics on order influence, conversion lifts, and revenue contributions from Search, Recommendations, Email, and Audience features.
  1. Optimize images (WebP format, correct resolution).
  2. Reserve layout space for dynamic elements to prevent layout shifts.
  3. Monitor real-world metrics instead of relying only on automated scores. Use Clerk’s dashboards to evaluate impact across channels.

Sliders

1

Slider

Basics #

Clerk.js comes with a built-in function for showing products with sliders. This feature shows a row of products with a set of arrows, that lets customers navigate many products with just a few clicks.

It basically works by creating a long, horizontal list of products, and then showing a fixed “window” of products at a time, which is controlled with the buttons.

The slider functionality is coded to show an entire new row of products for each click, to show as many new products as possible with as few clicks as possible.

...

Instant Search

1

Instant search

This dropdown allows your customers to browse and purchase products directly from your search bar. It combines the best features from modern search engines, with an eCommerce-specific twist:

  • Optimised for speed: Shows results in the blink of an eye while visitors are typing
  • Semantic search: Understands what the visitor means.
  • Auto-corrects spelling mistakes: The visitor should not realise that they made the spelling mistake in the first place.
  • Predicts customer behaviour: Matches are sorted based on how likely they are to sell right now.

These functions make searching your webshop from the search bar a seamless experience for the customer and opens up your catalogue in a different way.

...

API

1

All communication with Clerk occurs through the API:

https://api.clerk.io/v2

Setting up this communication requires 4 steps, which are outlined in this guide. You need to:

  1. Sync data
  2. Retrieve results
  3. Visualize the results
  4. Add tracking

API Keys #

These keys are used to access the data of your Store. They are found in my.clerk.io > Settings > API Keys.

They consist of a Public key, which gives access to endpoints exposing non-sensitive data, and a Private Key which allows you to work with data on the Store and access sensitive data, such as customer and order information.

...

GDPR

1

Clerk is fully GDPR compliant. This article explains everything you need to know about Clerk and GDPR, and how we make it easy for you to handle GDPR requests.

Trust Center #

At trust.clerk.io, you can review our privacy policy, subprocessors, data management, and much more. The page contains everything needed to understand how Clerk handles your data.

...

Search

1

General #

To incorporate your embed code for either Live Search or Search Page, you’ll need to access your theme files. To do this, follow the path Theme > theme files > my themes > choose > edit themes > find files

  • First, create your Live Search Design and Content in my.clerk.io.

  • In your header file or live-search header file (likely header.html , or, in this example, header-search.html), the Live Search embed code should be placed.

    ...

Search

1

Clerk.io’s search function consists of two parts:

  • The Live-Search dropdown that is displayed when a customer starts typing.

  • The Search Page which displays all matching products on a full page.

From the main menu start by clicking on Getting Started:

1. Create Standard Designs and Content #

The first thing you need to do, is create Standard Designs and Content.

You can use the Setup guide entitled SEARCH under the Getting Started option, to quickly create Designs and Content that have the same color scheme and style as your webshop.

...

Search

1

Instant Search & Search Page #

Clerk.io’s search function consists of two parts:

  • The Live-Search dropdown that is displayed when a customer starts typing.

  • The Search Page which displays all matching products on a full page.

  • The Facets will add faceted navigation so your customers can filter the results on the search page.

From the main menu start by clicking on Getting Started:

1. Create Standard Designs and Content #

The first thing you need to do, is create Standard Designs and Content.

...

Search

1

General #

To incorporate your embed code for either Live Search or Search Page, you’ll need to access your theme files. To do this, click “Design” in the left-side menu, then click “Code bewerken” in the Geavanceerd dropdown

  • First, create your Live Search Design and Content in my.clerk.io.

  • In your main layout file (likely fixed.rain or custom.rain), the Live Search embed code should be placed just before the closing tag.

    ...