Integrate in existing technology stack
Integrate Zephr with your existing technology stack using an HTML Features rule in the browser.
Running HTML feature rules in-browser is less secure than using the Zephr CDN, because users may disable JavaScript or exploit client-side vulnerabilities. To minimize risk, Zephr recommends:
Loading some or all content only after Zephr has run, or
- Using the Zephr CDN, which offers a more secure solution.
For details on running HTML features in the CDN transformation layer, see, HTML Features in the CDN Transformation Layer topic.
Before You Start
Before you use in-browser HTML features, make sure that you:
-
Deploy the JavaScript library on your site pages.
Always use the latest version.
Run the library as soon as the
DOMContentLoaded
event triggers to minimize load time.If your site uses lazy loading, ensure the library runs every time content is loaded.
The library is available through NPM and is required to process Zephr decisions and run client-side rules.
-
Set up a Zephr organization with at least one site.
Even if you are not using the CDN, at least one site is required to act as the domain for Zephr Public API requests.
When creating a site, you must specify an Origin. Zephr recommends pointing this to the live site's origin, though any base URL can be used. For further information on creating a site, see the Sites topic. <Link here>
-
Configure the Decision API endpoint.
If you explicitly configure the
cdnAPI
endpoint in the JavaScriptrun()
method, you must also configure the allowed origins for CORS.If the Decision API endpoint is explicitly configured to
cdnAPI
in the JavaScriptrun()
method, configure CORS allowed origins CORS allowed origins let you use the Decision API, which is called by the Zephr JavaScript library. The origins are configured using a comma-delimited list of the public base URLs from which the API is called. For example, “https://mysite.com,https://www.mysite.com”. For further information on configuring the JavaScriptrun()
method, see the Configure JavaScript run method topic. For further information on CORS configuration, see Configure the Browser topic. If thecdnAPI
endpoint is not explicitly configured, the Decision API endpoint is the origin URL for the site and you do not need to configure CORS. For further information on configuring thecdnAPI
endpoint, see the Configure the CDN API endpoint topic.
-
Default live domain.
The default live domain is used when the
cdnAPI
endpoint is not explicitly specified to initialise the Zephr JavaScript. For further information on finding you default domain, see Find Your Zephr Domain in Use Zephr functionality through third-Party CDNs .
-
Test the site.
Navigate to the default domain and append /blaize/health-check; for example, https://v4-demo-chris-my-site.cdn.de...e/health-check . If the site is correctly set up, you see a JSON object with the message ok.
An example of this implementation is provided in the Example Implementation topic.
Zephr Functionality Through Third-Party CDNs
Zephr out-of-the-box functionality, such as forms, extensions and Single Sign-on (SSO), expects a same-origin path for Zephr API calls. If you are not using the Zephr CDN, you must reverse or forward proxy any browser requests towards
/blaize*
and
/zephr*
.
For further information on using out-of-the-box Zephr functionality with a third-party CDN, see the Use Zephr functionality through third-Party CDNs topic.