The Clerk.io Developer Hub

Welcome to the Clerk.io developer hub.

This is site is only technical specification for developers.

You'll find comprehensive guides and documentation to help you start working with Clerk.io at our Help Center

Get Started    

Configuration

Clerk.js v2 is in Developer Preview

In this stage, Clerk.js v2 is being tested by select developers and we may change features and interfaces based on their feedback.

Clerk.js is build to make integration of Clerk.io onto any store frontend fast and enjoyable for developers. Clerk.js does all the heavy lifting, such as making network requests, gracefully handling errors, rendering into the DOM and applying click and behavioral tracking out of the box.

Embedding Clerk.js

If you use an official Clerk.io extension or plugin this is injected by default. You can find your stores specific embed code under your store settings at my.clerk.io.

Else insert the following snippet on every page just before the </head> tag.

  <!-- 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=(d.location.protocol=='https:'?'https':'http')+'://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_YOUR_API_KEY_HERE'
    });
  </script>
  <!-- End of Clerk.io E-commerce Personalisation tool - www.clerk.io -->
  

When loaded, Clerk.js will be exposed as the global Clerk object.

Configuring Clerk.js

Clerk.js is configured by default

If you use one of your plugins, or copy-paste the tracking code from my.clerk.io, Clerk.js is already configured.

This is only for if you need more advanced customisation.

Clerk.js is configured in the Clerk.config method. This method takes a single object with the configuration.

Here are the configuration options:

Option
Purpose

key

Your store's public API key.

visitor

The visitor's visitor id. This will be auto-generated by default.

language

Global configuration of the language to be used if applying multiple languages. This will be auto detected by default from the page's language meta information.

filters

A mapping of custom template filters.

collect_email

true if Clerk.js should automatically detect emails from input fields, else false. This is used for ie. abandoned basket and other personalised emails. falseby default.

Multiple configuration calls will only update the given configuration options and leave the others intact.

Clerk('config', {
  key: 'YOUR_API_KEY',
  visitor: 'ABC123',
  language: 'spanish',
  collect_email: true,
  filters: {
    format_price: function(price) {
      return price.toFixed(2).toString();
    },
    uppercase: function(string) {
    	return string.toUpperCase();
    }
  }
});

Configuration