Klevu Landing Page Builder is a beta product. Whilst every effort has been taken to make this integration a smooth process, there may be some issues here or there so please do let us know if you find anything unusual.
These instructions assume you have already created a Klevu Landing Page using our UI via the Klevu Merchant Centre. This is a generic platform-agnostic approach. If a link is available below for your specific framework, please follow that link instead:
- Adding a Landing Page to Shopify
- Adding a Landing Page to BigCommerce
- Adding a Landing Page to Magento
- For all other platforms, please continue reading.
Add files to your Website
The ZIP file you have downloaded contains three files:
- styles.css: A CSS file, containing some basic CSS for styling your Landing Page.
- templates.tpl: A Micro-Templates file, containing the HTML for rendering your Landing Page.
Note that by default, templates.tpl is just for reference. A base64 encoded version of the HTML found in
templates.tpl is already included within
scripts.js. If you want to override any of the micro-templates, please see the section at the bottom of this page.
These files must be included on an appropriate page of your website in order for your customers to see the Landing Page you have created.
The process of integrating a Landing Page with your website varies depending on your framework, so the following is a generic HTML script with descriptive comments that can be adapted to any framework.
Power-up Klevu on every page
For performance reasons the analytics calls to Klevu which need to be associated to a product click or an add to cart request do not fire until you reach the target page. For this reason, the Klevu Library must be included on every page it is possible to exit the landing page towards via a click.
In the below example we recommend you include the Klevu power-up on every page, so no matter what functionality you add to your landing page, any tracking events will still be fired.
The Landing Page specific JS, HTML and CSS however should only be included on the page you wish to display that particular content.
Once the above has been populated on a page of your website, when you load that page you should see the Klevu Landing Page content being displayed.
Once again you can see an example of this on our Demo store:
Should you wish to modify the CSS of the landing page, you should override using standard CSS approach rather than modifying the CSS included in the ZIP file. This will make future updates to your page easier.
Add a new script section to your HTML file to the end of the HEAD, after the Klevu initialisation scripts and inclusion of your Page Builder
Once your Page Template is saved, your overrides will be active on your Page Builder Page.