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.
For further information on running HTML features in the transformation layer of the CDN, see the HTML Features in the CDN Transformation Layer 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
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.
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.