This procedure is intended for Page Designer administrators who need to display a Clinic Locator or Store Locator on a page.

The component is particularly simple from an administrator perspective because the locations displayed on the map are not manually managed through Page Designer.

The administrator's main responsibility is therefore to determine where the component should be positioned on the page and validate that it displays correctly.

Objective

The Clinic Locator Map component is designed to display a map containing the physical locations associated with a specific Teoxane market.

Depending on how the locator is being used, these locations can represent:

• Partner clinics
• Doctors or practitioners
• Other partner locations
• Physical stores or points of sale where Teoxane products can be purchased

The component can therefore support either a Clinic Locator or Store Locator type of experience.

How the Component Works

The Clinic Locator Map is an interactive Google Map whose location information is populated from Teoxane's CRM.

Page Designer administrators do not manually create or enter the individual locations displayed by the component.

The component fetches the relevant location information from the connected system and displays it on the map.

This means that the Clinic Locator Map behaves differently from components where administrators manually enter text, upload content or configure individual entries.

Once the component has been added to the page, there is very little additional configuration required from the Page Designer administrator.

Country-Specific Experience

The Clinic Locator Map is country-specific rather than international.

Each Teoxane store can display the locator relevant to its own market.

For example, a Clinic Locator displayed on the Italian store is intended to show the relevant Italian locations rather than an international map containing clinics from several countries.

The same principle applies when the component is being used as a Store Locator.

The component should therefore be understood as:

One market → its relevant country map → its relevant CRM location data.

It is not designed as a global locator combining all Teoxane markets into a single map.

Data Source

The location data displayed by the component comes from the CRM.

This is an important distinction for Page Designer administrators.

The component itself is not a location-management tool.

Administrators cannot use the Page Designer component to manually:

• Add a clinic
• Add a doctor
• Add a store
• Enter an address
• Modify an existing location
• Build a custom list of locations

Page Designer is responsible for displaying the locator, while the location information itself is supplied by the connected CRM data.

Placement and Compatibility

The Clinic Locator Map is a large component that requires sufficient horizontal space to display correctly.

The recommended placement options are:

1. Main Region
2. Box Layout

These are the standard and recommended locations for the component.

Main Region

The Main Region provides the component with the available page width and is therefore suitable for displaying the map.

Box Layout

The Clinic Locator Map can also be placed inside a Box Layout.

This allows the map to remain within the page margins while still providing sufficient space for the component to function and display correctly.

Tab Wrapper

The component can technically also be used inside a Tab Wrapper.

However, this is considered an alternative rather than a recommended implementation.

If a Tab Wrapper is used, sufficient space needs to remain available for the map.

For a standard implementation, prefer the Main Region or Box Layout.

Versatility

From an administrator perspective, the Clinic Locator Map has low configuration complexity but limited design flexibility.

Its purpose is very specific: display the relevant location network for the market.

The administrator can decide where the component sits within the supported page structure, but does not control the individual data points displayed by the map.

This makes it a highly specialized component rather than a general-purpose media or content component.

Typical Use Cases

Clinic Locator

Use the component when visitors need to find clinics, doctors, practitioners or other Teoxane partners within the relevant country.

Store Locator

The same component can support a Store Locator experience when the purpose is to show physical locations where visitors can purchase Teoxane products.

The underlying purpose remains the same:

Display a country-specific network of physical locations supplied by the CRM.

Pairing With Other Components

The Clinic Locator Map should be considered a standalone component.

It does not require another Page Designer component in order to function or make sense.

Additional content may naturally appear before or after the map as part of the overall page design, but this should not be considered a required component pairing.

The map itself provides the location experience.

Do Not Manually Manage Locations Through Page Designer

The locations displayed by the Clinic Locator Map come from the CRM.

Do not expect to manually add, remove or edit individual clinic, doctor, partner or store locations from the Page Designer component.

If the location data itself is incorrect, the issue is not solved by manually changing the component.

The Locator Is Country-Specific

The component is intended to display the locations associated with the relevant market.

It is not an international locator combining several countries into one map.

For example, a locator used by the Italian store should display the relevant Italian location network.

Give the Component Sufficient Space

The Clinic Locator Map is a large interactive component.

Use:

• Main Region
• Box Layout

A Tab Wrapper is technically possible but is not the recommended standard placement.

Avoid Small or Crowded Grid Structures

Do not try to squeeze the Clinic Locator Map into narrow or highly divided Grid layouts.

Although Page Designer may technically allow the component to be dropped into these structures, the available space can be insufficient for the map.

This can cause the design to break.

The fact that Page Designer allows a component to be placed somewhere does not necessarily mean that the placement is appropriate for the component's design.

1. Determine the Purpose of the Locator

Before adding the component, confirm what the locator represents on the page.

The component can be used to display, depending on the market configuration:

• Clinics
• Doctors or practitioners
• Partner locations
• Physical stores or points of sale

The administrator does not need to create these locations in Page Designer. This step is simply about understanding the purpose of the locator within the page being built.

2. Choose the Appropriate Placement

Determine where the Clinic Locator Map should be displayed.

For a standard implementation, use either:

Option A: Main Region

Place the component directly in the Main Region when the map should make use of the available page width.

Option B: Box Layout

Place the component inside a Box Layout when the map should respect the page margins.

Both options provide the component with sufficient space to display correctly.

Alternative: Tab Wrapper

A Tab Wrapper can technically contain the Clinic Locator Map.

However, this is not the preferred implementation.

Use this option only when the page structure requires it and sufficient space is available.

3. Avoid Constrained Layouts

Before dropping the component, check the structure you have selected.

Do not place the Clinic Locator Map inside a small or crowded Grid structure.

If the structure divides the available area into narrow rows or columns, select a more appropriate placement instead.

Prefer Main Region or Box Layout rather than trying to force the map into a space that is too small for it.

4. Add the Clinic Locator Map Component

Locate the Clinic Locator Map in the Page Designer component list.

Drag and drop the component into the selected:

• Main Region, or
• Box Layout

If you are deliberately using the alternative configuration, place it inside the appropriate Tab Wrapper.

5. Let the Component Display the Connected Location Data

No individual clinic, doctor, partner or store locations need to be manually entered into the component.

The map uses the location information supplied by the connected CRM.

There is therefore no need to manually reproduce the location network inside Page Designer.

6. Apply the Component

Once the Clinic Locator Map has been placed correctly, click Apply.

Apply saves the component configuration.

There is no additional location configuration required within the Page Designer component.

7. Validate the Locator on Staging

Validate the completed page on the appropriate staging storefront.

Confirm that:

• The Clinic Locator Map displays correctly.
• The map has sufficient horizontal space.
• The component design is not constrained or broken by its placement.
• The locator displays the appropriate country-specific experience.
• The expected clinic, doctor, partner or store location information is being displayed.

If the component appears constrained or its design breaks, reconsider its placement.

Move it to the Main Region or Box Layout rather than attempting to make it fit within a small Grid structure.

If the component displays correctly but the actual location data is incorrect, remember that the locations originate from the CRM and are not manually managed through the Page Designer component.