Introduction

The Clickmax Browser SDK is the script that connects your external page to Clickmax.

It handles three main jobs:

capturing leads
recording page events
taking the visitor to the next step of the funnel

Installation

create an external page in Clickmax
add that page to your funnel
paste the script below inside the <head> of the page's HTML

index.html

<!DOCTYPE html>
<html>
  <head>
    <!-- Start of Clickmax SDK Code -->
    <script>
    (()=>{let e="YOUR_PROJECT_SLUG",c="YOUR_PAGE_PATH",t=window;if(!t.cxs){function s(e,...c){t._cx?t._cx.callMethod.apply(t._cx,[e,...c]):t.cxs.queue.push([e,...c])}s.queue=[],t.cxs=s;{let t=encodeURIComponent,s=document,n=`https://api.clickmax.io/sdk/script.js?ps=${t(e)}&pg=${t(c)}`,i="script",p=s.createElement(i);p.async=!0,p.src=n;let o=s.getElementsByTagName(i)[0];o.parentNode.insertBefore(p,o)}}cxs("init",e,c)})();
    cxs('track', 'page_view');
    </script>
    <noscript><img height="1" width="1" style="display: none" src="https://api.clickmax.io/tr/YOUR_PROJECT_SLUG?ty=page_view&pg=YOUR_PAGE_PATH&pl=%7B%22noscript%22%3A1%7D"/></noscript>
    <!-- End of Clickmax SDK Code -->
  </head>

  <body>
    <!-- Conteudo da pagina -->
  </body>
</html>

How it works

Once the script is installed, the page starts recognising the elements marked with the Clickmax attributes.

Common examples:

a form with data-cx-ingest-form
a widget with data-cx-form-widget
a button with data-cx-open

When the visitor interacts with those elements, the SDK:

collects the data it needs
sends that information to Clickmax
applies the rules of the configured funnel

That saves you writing a separate integration for every form, click or redirect.

When to use each section

Forms

Use this when you want to install or customise lead capture on the page: marking a <form> with data-cx-ingest-form, choosing between an inline form, an unstyled widget or a modal, setting fields and options and sending custom fields.

Create a lead via JavaScript

Use this when you want to call the SDK straight from your own code, with cxs('lead', ...), instead of an HTML <form> — in a React application or a multi-step funnel, for example. This is where the public way of creating a lead with JavaScript lives, with fields, callback and the tracking the SDK fires on its own.

Tracking

Use this when you want to measure behaviour on the page: which events the SDK watches by itself, which public selectors it recognises (data-cx-track, .cm-checkout-button, .cm-next-funnel-node) and how to fire a manual event with cxs('track', ...).

Routing

Use this when you want to understand how the visitor moves on to the next step of the funnel: what the SDK takes into account to pick the destination, how the redirect is built and what you do not have to configure by hand.

Examples

Use this when you want to see the forms running against your own project and page, and copy the code for each case.

#Introduction

#Installation

#How it works

#When to use each section

#Forms

#Create a lead via JavaScript

#Tracking

#Routing

#Examples