Zephr User Guide

Browser-Side HTML Features with the Zephr CDN

206 views 0

Zephr gives you the ability to run HTML Feature Rules in the Zephr Site CDN, or in Browser, allowing you to integrate Zephr in a way that makes sense for your existing technology stack.

This guide discusses working with Zephr In-Browser, using the Zephr CDN to deploy a JavaScript library, which is used to enact transformations client-side.

Note: for this implementation, you are unable to augment decision data, as the JavaScript library is deployed by the Zephr CDN. If you wish to add additional data to your browser-side decisions and customer journeys, we recommend reading our guide describing how your development team can deploy and augment the JavaScript library.

Browser-Side Features using the CDN

To use Browser-Side Features via the CDN, login to your Zephr Admin Console, then select Delivery > Sites.

Navigate to the site you wish to run a Browser-Side rule on, and select Browser Configuration. 

Toggle the ‘Inject Browser Features Script Tags’ option to On, then click Done. This will inject a script tag that loads the JavaScript library for making browser-side decisions. 

You may also choose to toggle on the ‘Inject Access Details’ option. This injects access details for the browser-side decisions into a user’s browser.

In order to use the Decision API (which will be called by the Zephr JavaScript library) CORS allowed origins must be configured. This is a comma delimited list of all of the public base URLs from which the API will be called. For example, “https://mysite.com,https://www.mysite.com”.

Once complete, click Save.

Browser-Side HTML Features

Once the JavaScript has been added to a site, you can configure a feature rule. To do this go to Products > Features in the Zephr console, then click Add a Feature.

Give your Feature a Title, and select HTML for the Type of Integration. You can also choose the Type of Feature – which refers to the type of content the Feature is transforming.

Click Continue.

A new page will open, showing the Developer Interface. The Developer Interface contains the tools needed by a developer to hook Zephr up to your site.

To run your HTML Rule Browser-Side, locate the Where To Run? heading and select Run in Browser.

Below you will have the option to select whether web crawlers can access the content in the feature.

Under the Site Integration heading, the Comment Tag option will be greyed out. For Browser-Side Rules, you will need to integrate using CSS Selectors. Information on the types of CSS Selectors you can use can be found on the main HTML Features page.

Developer Console - Run In Browser

Once complete, click Update & Lock. You can now build and manage your rule as usual, and it will run in-browser.

Note: If you return to an existing feature the developer interface will be closed by default. You can find it at the bottom of the page. Click anywhere in the border to re-open it.


The biggest limitation with any JavaScript-based solution is that it relies upon JavaScript and the site visitor to allow the execution to run honestly. A sensible strategy for high-value content is to load some of all of the content after Zephr has executed, to prevent circumvention by disabling JavaScript. Alternatively, you can use the Zephr CDN – which is far more secure.