Zephr User Guide

Sites

271 views 0

Zephr’s Sites section is where you set up and configure your company sites to run through Zephr’s CDN. Each site can have multiple domains and sites can be grouped into easily managed site groups. Once added, each of your sites can be set up to use Zephr through a single admin console, meaning you can create global user journeys across each of your brands, or build out specific use cases for individual titles.

The Sites section is also where you’ll create cache rules, and set up custom error pages to be served through the Zephr CDN.

In this guide, we will discuss the different options available within the Sites page. For a comprehensive guide to going live with Zephr, read our Go-Live guide.

Configuring a Site

First off, navigate to Delivery > Sites. Here you will find a list of Sites already set up to use the Zephr CDN. To add a new Site, click the Add A Site button.

A list of two sites configured on Zephr

Title

On the Add A Site page, give your Site a title. We recommend this being in line with the core URL of your website, so it’s easy to find in your list. For example, in setting up www.zephr.com, we would title our Site ‘Zephr’.

Default Origin URL

In Zephr, your origin site(s) refers to the base website that will sit behind Zephr. This is the version of your site with no user journey rules or transformations, which your domain usually points to.

Zephr’s CDN becomes a conduit between your Domain and your Origin URL, allowing us to serve your content, create custom user journeys, and add a layer of user authentication.

Set your Default Origin URL to your base origin site, so Zephr can serve the site via our CDN.

Please note, your Origin URL MUST be different from the main domain your customers will use. For example, if users are coming to www.zephr.com, the Origin URL CANNOT be www.zephr.com. The Origin URL is what your main domains, or vanity URLs, usually point to. Using the Zephr CDN, your vanity URLs instead point to Zephr, which in turn points to your Origin URL.

Make sure you use the correct HTTPS or HTTP in the Origin URL and test the URL to ensure it works before you intend to go live.

Site Domains

The Site Domains section is where you determine which domain overrides are exposed to the end-user. Put simply, which URLs will a user be able to use to access your site via the Zephr CDN. This allows you to use Zephr from a number of different domains to access the same origin.

Zephr will create two default subdomains:

  • {yoursite}.cdn.zephr.com (set to preferred Live)
  • {yoursite}.preview.zephr.com (set to preferred Staging)

Add your required domains for testing, and selected your preferred URLs for Live and Staging.

When you go live, you will also add in all of the domain options for your core site URL, such as www.zephr.com, zephr.com, and sub domains like shop.zephr.com. Read our Go-Live Guide for more details.

Routes

If your set up is slightly more complex, the Routes sections allows you to point different requests to different origins. For example, you may serve your /shop section via a different Origin, and you would add this here.

Click Add An Origin Route, enter the Base Path, such as /shop, then enter the Origin URL this should be linked to.

Cache Rules

Zephr caches the content from your Origin as a means of improving site performance when making access decisions.

By default, website content is cached for 10 minutes, meaning updates made to your CMS will take up to 5 minutes to propagate to the end-user via Zephr.

In some cases, you may wish for this cache to be removed – for example, if you publish breaking news and want pages from /breaking-news to be excluded from the cache.

This is possible by adding a Cache Rule.

First, click Add a Cache Rule, and give your Cache Rule a title.

Next, add your URL path, taking regex into consideration. For example, \/breaking-news

Finally, select which Cache Exceptions you would like to make. Here you can choose to disable the Origin Cache, meaning your origin content for this path will not be subject to the 10 minute cache time.

You can also choose to Disable the User Attribute Cache. In this setting, if a user edits information stored in a User Attribute, then refreshes the page, it ensures their information is up to date when used within a decision.

Sites - Cache Rules

Please note: Removing the origin cache could have an impact on performance (as Zephr’s cache means content can be served to visitors more quickly) and should be tested post-implementation.

By default, two rules are enabled. These rules refer to headers sent from your origin. You can disable them using the toggles. The rules are as follows:

  • Honour cache-Control: s-maxage=?. Tells proxy caches the length of the cache period. The s-maxage header determines when cached content is eligible for background refresh; this must be passed in responses from your origin. Disable this if you do not want the cache time to be honoured

    Note: Zephyr usually uses its own settings and ignores s-manage=?. By default, content is cached for a day and refreshed in the background after five minutes. This means that there is a short delay before the updated files are served and the changes reflected on your site.

  • Honour Vary: User-Agent. Tells proxy caches that the cache uses the user agent to serve different pages. For example, this can be used to serve site.com/breaking-news as a version for mobile users and a version for desktop users. Disable this if you do not want to serve different versions depending on the user agent

Browser Configuration

Your Browser Configuration settings will affect things that get sent to a user’s browser.

CORS Allowed Origins

Here you can set CORS Allowed Origins, which let you use the website from a domain that isn’t the site’s domain – such as using an API through Zephr in a cross-origin matter.

In order to use the Decision API 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”.

Inject Access Details

Switching the Inject Access Details toggle to on injects access details for browser-side decisions into a user’s browser. You may wish to use this if you are running browser-side decisions.

Inject Browser Features Script Tags

If you are using Browser-Side HTML Features using the Zephr CSN, switch the Inject Browser Features Script Tags to on. This will inject a script tag that loads the JavaScript library for making browser-side decisions.

Read our Browser-Side Features guide for more information.

ReCAPTCHA

When registering new users to Zephr, you have the option to use reCAPTCHA on your out-of-the-box registration forms. This option is available in the Browser Config settings.

reCAPTCHA is a system designed to establish that a computer user is a human, reducing the number of bots and fake accounts created on your site, and protecting your site from spam and abuse.

Using reCAPTCHA with Zephr does not require any additional work from end-users when creating an account. It is a seamless, automatic process.

Use the toggle to turn this option on.

Template Pages

The Template Pages section allows you to manage the error pages users will see, should there be an error on your Origin leading to Zephr being unable to display your site.

502 Error Page

The 502 Error Page section is where you manage the error page your users will see if there is a 502 on your site. Chances are, you’d like your users to see a branded error page letting them know what’s happening. To display a custom 502 error page through Zephr, edit/add your HTML in this section.

Screen showing html field for editing 502 error page.

Once this is saved, when a user gets a 502 on the site, we’ll display what you’ve added in.

All Other Errors

All other error pages are managed in this section. As with the 502 Error Page, edit or add your HTML in this section, and when done, click Save.

Request Headers

The Request Headers option is available for clients who wish to set specific Headers. For example, you may be using Zephr in Proxy Mode, and wish to set the Site header to specify your Site Domain, rather than your Origin URL.

To add Request Headers, enter the Name and Value of the Request Header you wish to set, then click Add. Click Done once complete.

Third Party Authentication

You can use the Third Party Authentication option to configure the authorisation setting for iOS or Android when using a third-party sign on.

To enable the OAuth 2.0 authorisation protocol for iOS and Android, select the Enable Oath 2.0 toggle. This allows you to access data without sharing credentials.

To define origins that can use the third-party authentication settings, select the Add Allowed Origin button and enter the base URL in the text box. You can add further origins by repeating these steps.

To add a redirect Uniform Resource Identifier (URI), select the Add redirect URIs button, then enter the URI in the text box. You can add further URIs by repeating these steps.

OAuth Page Customisation

You can customise the page used for authentication as follows:

  • Upload a logo. To do this, you can either drag a file to the drop box, or select the Select a File to Upload button, navigate to your file, select it and select the Open button
  • Specify a title for the login page. To do this, enter the title you want to use on the login page in the Login Page Title text box
  • Specify a title for the consent page. To do this, enter the title you want to use on the consent page in the Consent Page Title text box
  • Define the placeholder for the identifier. To do this, enter the placeholder you want to use in the Identifier Placeholder text box
  • Select a background colour for your page. You can select a colour in any combination of the following:
    • Select an area in the colour box
    • Select the eyedropper icon to choose a colour used anywhere in your screen
    • Select the colour from the colour bar
    • Enter the red, blue and green colour values in the R, G and B text boxes
    • Select the arrows beside the RGB text boxes to use hue, saturation and lightness colour values. Enter the values in the H, S and L text boxes
    • Select the arrows beside the HSL text boxes to use a hex colour value. Enter the hex value in the text box

When you have finished defining your styles, select the Done button.

Style Guide

The Style Guide option allows you to configure the logo and colours used on your pages.

You can upload a file in either of the following ways:

  • Drag your file to the drop field
  • Select the Select A File To Upload button to navigate to your file, select the file and then select the Open button

To change the background colour of your pages, select the colour wheel, as illustrated below:

You can select a colour in any combination of the following:

  • Select an area in the colour box
  • Select the eyedropper icon to choose a colour used anywhere in your screen
  • Select the colour from the colour bar
  • Enter the red, blue and green colour values in the R, G and B text boxes
  • Select the arrows beside the RGB text boxes to use hue, saturation and lightness colour values. Enter the values in the H, S and L text boxes
  • Select the arrows beside the HSL text boxes to use a hex colour value. Enter the hex value in the text box

When you have finished defining your styles, select the Done button.

Login Providers

This section allows you to set up a site-specific Login Provider for use on an out-of-the-box Zephr registration & login form, or page.

In order to configure this, you must have created a global Login Provider. Read our Login Providers guide for more details.

Here you will see a list of the Login Providers you have added for a particular site.

To add a new Login Provider, click Add Login Provider, then select an option from the list of global Login Providers you have added.

Note: If you add a login provider that is already listed, the new version replaces the existing version.

Once complete, click Done, then click Save to save your Site settings.

Managing Your Sites

Once you have saved your Site configuration, it will display within your Sites list, under Delivery > Sites.

To edit your configuration, locate the Site you wish to amend within the list, and click the name.

To delete a Site, locate the Site you wish to amend within the list, and click the Delete button. You will be prompted to confirm you wish to delete this site. Note, deleting a site will remove it from Zephr, so users no longer access your site via the CDN. For live sites, there may be domain name changes you need to make following this change. We recommend speaking to your Customer Success Manager before deleting a site.