Add A Surface

Configuring a surface requires four steps:

1. Create a Surface: Set a name, slug, and description.
2. Create Components: Define things like article body, sidebar or newsletter footers as discreet components.
3. Configure a Surface-Level Workflow: Set a surface-level workflow for routing traffic, where relevant
4. Configure Component Workflows: Define relevant workflows for triggering paywalls, ads, or CTAs

To begin, navigate to the Surfaces section, in the left-hand navigation menu.

Your surfaces page shows a list of configured surfaces and allows you to edit existing surfaces, or add new ones.

Add a Surface

To create a surface, click 'Add a Surface’.

You will be prompted to give your surface a name, slug, and optional description. By default, the slug will be a hyphenated version of the name you gave the surface, but you can override this if you wish. The slug will be used to refer to your surface in API calls.

If you have Brands enabled, you must link this surface to a particular brand or brands by clicking the 'Link Brands' button. This means the surface will only be available in environments linked to that specific brand or brands.

Once done, click 'Create Surface'. You will then be taken to the surface management area. This is split into three tabs: Components, Workflow, and Manage Surface.

Components

Components are specific elements or functional features within a surface that can have individual access control applied. For example, article content, banner ads, ad slots, or subscription prompts.

Each component can have custom access rules and behaviors defined independently of other components on the same surface.

To create a component, click ‘Create Your Component’.

You will be prompted to give your component a name, slug, and optional description. If your surface type is set to "Web Content", you can also provide an optional CSS selector. By default, the slug will be a hyphenated version of the name you give the component, but you can override this if you wish. Once done, click ‘Create Component’.

Once you’ve created your component, you’ll be taken to the component area and see two tabs: Workflow and Manage Component.

Workflow

Component workflows are custom rules for component-level access control, enabling usage meters, dynamic paywalls, and personalized experiences for individual elements.

These workflows provide granular access control over specific content pieces within a surface. For example, adding a paywall to an article.

In this tab, you can toggle if a workflow is enabled, or click ‘Edit Workflow’ to configure the workflow.

Once you’ve configured your workflow, click ‘Update Workflow’.

For more information, read our Workflows guide.

Manage Component

The manage component tab is where you update your component’s name, and description. If your surface type is set to "Web Content", you can also set the CSS selector. If you're using our open source Cloudflare worker, setting a CSS selector allows you to target that selector in the relevant component workflow. For example, removing content within page elements that match the CSS Selector.

Once done, click ‘Update’.

To return to the surface, click ‘Back to Surface Components’.

Workflow

The workflow tab allows you to manage the workflow for your surface. Here you can define how a surface should behave using custom logic tailored to your product.

In this tab, you can view a preview of your workflow, enable or disable the workflow, edit the workflow, and delete the workflow.

Surface workflows let you write JavaScript to control exactly how access is granted, denied or modified. For example, you may choose to redirect bots away from your web surface, or set cookies or alter headers for certain users.

Add a Workflow

To create your surface-level workflow, click ‘Add Workflow’.

You'll be taken to the Edit page. Here you’ll see a code block for editing your workflow. Once you have made any relevant edits, click ‘Update Workflow’. For more information, see our Workflows guide.

To navigate away from the edit screen, click ‘Back’.

Delete a Workflow

To delete your workflow, Click the 'Delete' button. You will be prompted to confirm you wish to delete the workflow. This will permanently remove the workflow from our system. Any access checks relying on the workflow may stop working. To continue, click 'Delete'. Otherwise, click 'Cancel'.

Please note: Any changes you make to a workflow will only be available in Preview. If you wish to deploy these changes, create a new version, then deploy to the relevant environment. More information is available in our Environments guide.

Manage Surface

The manage surface tab allows you to update your surface’s name and description, as well as set the type of surface it is. For example, noting if it is HTTP or Web Content.

• HTTP: Allows for the modification of HTTP requests in a surface workflow. This includes adding/removing cookies, modifying headers, changing the HTTP status, and changing the response body.
• Web Content: Allows for the modification of HTML content in surface component workflows. This includes optionally specifying the component workflow target with a CSS selector and making content transformations, such as removing HTML target content or adding new content before/after.

Remember to click ‘Update’ once you have made your changes.