Linking between experiences

• Experience hyperlinks
• Linking to an experience
• Using a Hyperlink variable in your custom components
• Configuring the hyperlink pattern
  • Overriding the global pattern
  • Overriding for specific components
• Linking to an entry field or manual value

Experience hyperlinks

Experiences provide a dynamic way to link to other experiences from within an experience. This can be done by using the Hyperlink variable type. Hyperlink variable type is supported for both built-in and custom components. The built-in components that support the Hyperlink functionality out of the box are the following:

Linking to an experience

You can link to another experience through the right sidebar in the Experiences canvas. In the following steps, we link an example Button built-in component to an experience. When a user clicks this button, they are redirected to the experience it is linked to.

1. Log in to the Contentful web app.
2. Go to the Experiences tab.
3. Either go to the existing experience and open it or create a new one.
4. Select a component on the canvas or drag and drop a new one to it. On the right sidebar, select the Content tab.
5. In the Content properties menu, select the URL property.
6. Under the Content source area, select the Experience option.
7. Click Existing experience.
8. In the entity selector, select the experience you would like to link to. The Button component now links to your selected experience.

Using a Hyperlink variable in your custom components

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

export const customButtonDefinition = {
  id: custom-button,
  name: Custom Button,
  tooltip: {
    description: 'Drop onto the canvas to add button that can be used to trigger an action.',
  },
  variables: {
    label: {
      displayName: 'Label',
      type: 'Text',
      defaultValue: 'Button',
    },
    url: {
      displayName: 'URL',
      type: 'Hyperlink',
      defaultValue: '/',
    },
  },
};

Configuring the hyperlink pattern

By default, when linking an experience the SDK constructs a relative URL using the following pattern to construct the URL path: /{locale}/{entry.fields.slug}/. In case you want to use a different experience field or specify an absolute URL, you can override this pattern according to the following options:

Overriding the global pattern

Specify the hyperlinkPattern when fetching the experience via the useFetchBySlug or useFetchById hooks. For example:

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

This overrides the pattern in the global scope and affects both built-in components and custom components without a local override.

Overriding for specific components

Specify the hyperlinkPattern in the component definition:

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

This overrides the pattern only for bindings to the link variable for the Custom Button component. Everything else continues using the global pattern.

Linking to an entry field or manual value

You can use Hyperlink variables to link to an entry field or enter a value manually. In these cases, the hyperlinkPattern doesn't have any effect, and the resolved value matches exactly what is saved in the entry field or in the manual value.