> This page is for Studio.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://contentful-staging.ferndocs.com/developers/docs/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://contentful-staging.ferndocs.com/developers/docs/_mcp/server.

# Link between experiences

> Learn about experience hyperlinks for Experiences by Contentful Studio.

## Overview

You can link an experience inside another experience using the `Hyperlink` variable type. The `Hyperlink` variable type works with both built-in and custom components. The following built-in components support the `Hyperlink` functionality by default:

| **Component**     | **Content property** |
| ----------------- | -------------------- |
| Button            | URL                  |
| Section/Container | Hyperlink            |

## Link to an experience

In the following example, we link a **Button** built-in component to an experience.

1. Open an existing experience or create a new one.
2. From the **Basics** area of the **Components** tab, drag and drop the **Button** component to the canvas.
3. Select the **Content** tab in the right sidebar. Under the **URL** area, select the **Experience** option.
   ![experiences-hyperlink-bind-button](/developers/docs/_fern-img/039d2ebcac166b4df10b909b6a41e6ff0c759ac10de391d1ad4a9c25d97f1348.webp)
4. Click **+ Add experience** and select **Add existing experience**.
5. Select the experience you would like to link to.

The `Button` component now links to your selected experience.

## Create custom components with hyperlinks

You can link to an experience from a custom component by using the `Hyperlink` variable type in the component definition. Here's an example:

```ts
export const customButtonDefinition = {
  id: custom-button,
  name: Custom Button,
  tooltip: {
    description: 'custom button with hyperlink',
  },
  variables: {
    label: {
      displayName: 'Label',
      type: 'Text',
      defaultValue: 'Button',
    },
    url: {
      displayName: 'URL',
      type: 'Hyperlink',
      defaultValue: '/',
    },
  },
};
```

## Configure the hyperlink pattern

By default, the SDK constructs a relative URL when linking to an experience using the pattern `/{locale}/{entry.fields.slug}/`. If you need to use a different experience field or specify an absolute URL, override the default pattern as follows:

### Override the global pattern

To override the pattern globally, specify the `hyperlinkPattern` when fetching the experience via the `useFetchBySlug` or `useFetchById` hooks. For example:

```ts
const { experience, isLoading, error } = useFetchBySlug({
slug,
localeCode,
client: client,
experienceTypeId,
hyperlinkPattern: 'https://www.example.com/experiences/{entry.fields.id}',
});
```

This affects both built-in and custom components unless a local override is provided.

### Override for specific components

To override the pattern for specific components, define the `hyperlinkPattern` in the component definition:

```ts
url: {
  displayName: 'URL',
  type: 'Hyperlink',
  defaultValue: '/',
  hyperlinkPattern: 'https://www.example.com/experiences/{entry.fields.id}',
},
```

This overrides the pattern only for the `Custom Button` component's `link` variable. All other components continue using the global pattern.

## Link to an entry field or manual value

You can link to an entry field or manually enter a value using `Hyperlink` variables. In these cases, the `hyperlinkPattern` doesn't apply. The resolved value matches exactly what is saved in the entry field or the manually entered value.