Skip to main content

Developer interface for HTML Features


Developer interface for HTML Features

If defining an HTML feature, the Developer Interface displays after you select the Continue button in the Add a Feature screen.

The Developer Interface screen for an HTML feature is as illustrated below:


To define the Developer Interface for an HTML feature, complete the following steps:

  1. Select the place in which to run the HTML feature from the Where to Run? radio buttons. The options are as follows:
    • Run in Site CDN

      Select the Run in Site CDN radio button if you use the Zephr CDN Transformation Layer.

    • Run in Browser

      Select the Run in Browser radio button if you use browser-side HTML, either with or without the Zephr CDN.

  2. Select whether to allow web crawlers to access the feature from the Web Crawler Access radio buttons. The options are as follows:
    • Yes

      If you select the Yes radio button, this means that web crawlers, such as Google Web Crawlers, can access your feature, whether or not they have an active session or product grants.

      Zephr verifies the IP address of the following crawlers before granting access:

      If you want to control access for other web crawlers, you can use the Device decision node. For further information on the Device decision node, see the Session topic.

      Note: Zephr does not verify the IP address of other web crawlers.

    • No

      If you select the No radio button, web crawlers cannot access your feature.

  3. If you've selected Run in Browser in Step 1, you can define JSON paths that could be used to make decisions in the rule. The JSON paths should match the JSON object that is passed to the custom data.


    Click Add A JSON Path to add a JSON path. Available data types are String, Number, Boolean, and DateTime. You can later create Custom Data decisions based on the JSON Path defined here. For more information about how to add Custom Data decisions, see Custom Data.
  4. Select whether to use comment tags or CSS selectors to integrate the feature with your site from the Site Integration radio buttons. The options are as follows:
    • Comment Tag

      If you select the Comment Tag radio button, the tags to include in your code to wrap the feature on your website displays, as illustrated below:


      Hover over the code box, and select the Copy link in the top right corner to copy the tags for use in your code.

      For an example of using Comment Tags, see the Comment Tags Use topic

    • CSS Selector

      If you select the CSS Selector radio button, a text box displays, as illustrated below:


      Enter the CSS selector that you use in your code for the feature.

      For an example of using CSS Selectors, see the CSS Selectors Use topic. For the CSS Selectors supported by Zephr, see the Supported CSS topic.

  5. If the feature tags, or CSS selector, are already added to your code, you can verify the integrations by selecting the Check Sites for Feature button

    If the feature has been successfully integrated, the following message displays with the origin URL at which it was found in the Example Feature URL text box:


    If the feature is not found, the following message displays, and the Example Feature URL text box is blank:


    You can enter your origin URL in the Example Feature URL text box to check your site again.

    Note: The origin site URL is the URL to which your domains, or vanity URLs, would point if you were not using the Zephr CDN; or, if not using the Zephr CDN, your website.

  6. Select the Update & Lock button

You can build your rule using the output in the Rules Builder. For further information on the available decision nodes, see the Feature Decision Nodes topic.

Select the Save button to save your HTML Feature, or select the up arrow then the Save & Publish button to save your HTML feature and make it available for use.