With the Zephr CDN
When using the Zephr CDN, you can run HTML feature rules in-browser or in the transformation layer of the CDN. This gives you flexibility when deciding how to integrate Zephr with your existing technology stack.
Running HTML feature rules in-browser with the CDN is less secure than using the transformation layer. This is due to the intrinsic risks associated with a JavaScript-based solution, such as the end user disabling JavaScript in their browser. To prevent circumvention of the JavaScript, Zephr recommends loading some or all content after the Zephr CDN has run.
For further information on running HTML features in the transformation layer of the CDN, see the HTML Features in the CDN Transformation Layer topic.
When using in-browser HTML features with the Zephr CDN, the CDN deploys a JavaScript library that is used to enact transformations in the browser.
Note: As the CDN deploys the JavaScript library, you cannot augment the decision data. Instead, you must use one or more alternative methods to include additional data in your browser-side decisions and end user journeys. For an example of augmenting data for your technical team, see the Augment Your Decision Data topic.
To use in-browser HTML feature rules with the CDN, you must do the following:
- Configure your site to support browser-side HTML Features
For further information on configuring the browser, see the Configure Your Site section.
- Add a feature to run client-side
For further information on adding a feature to run client-side, see the Add a Browser-side HTML Feature section.
Configure Your Site
To configure your site to use HTML features with the Zephr CDN, complete the following steps:
- If you have not already done so, add a site as described in the Add a Site topic
- When configuring your browser, as described in the Configure the Browser topic, configure the following options:
- CORS Allowed Origins
This must be configured if you want to use the Decision API. The Decision API is called by the JavaScript library served by the Zephr CDN.
Enter a comma delimited list of all public base URLs from which the API is called.
- Inject Access Details
If you want to inject access details in the browser for use in your browser-side decisions, ensure that the Inject Access Details toggle is selected.
Note: The Inject Access Details toggle is selected by default.
- Inject Browser Features Script Tags
Ensure that the Inject Browser Features Script Tags toggle is selected.
This injects a script tag that loads the JavaScript library for browser-side decisions.
Note: The Inject Browser Features Script Tags toggle is not selected by default.
- CORS Allowed Origins
Add a Browser-side HTML Feature
Before building this type of feature, ensure that you use the Zephr CDN and have set up one or more sites.
For further information on configuring your site for in-browser HTML features, see the Configure Your Site section.
To use HTML features in the browser, complete the following steps:
- Add an HTML feature as described in the Add a Feature topic
- When you complete the Developer Interface, select the Run in Browser radio button from the Where to Run? radio options
Note: The CSS Selector radio button is automatically selected from the Site Integration options when running in the browser. For further information on using CSS Selectors, see the CSS Selectors Use topic. For further information on the CSS Selectors supported by Zephr, see the Supported CSS Selectors topic.
- Complete the Developer Interface settings, as described in the Developer Interface for HTML topic
Note: You can also use HTML features with the Zephr CDN transformation layer. For further information on implementing HTML features with the CDN transformation layer, see the HTML Features in the CDN Transformation Layer topic.