Skip to main content

Navigation & Routing

The Amplify Widgets include built-in routing logic that allows users to click on interactions in the Summary Widget (like "View all ratings" or "Read comments") and navigate to the Detail Widget. This only applies to widgets created using the Summary + Detail widget type — standalone summary widgets cannot connect to unrelated detail widgets.

Same-Page Navigation​

If both the summary and detail widgets are on the same page, no additional configuration is needed. The browser will smoothly scroll to the detail widget and open the corresponding tab.

See Installation & Setup for the basic same-page markup.

Cross-Page Navigation​

If your summary widget and detail widget live on separate pages, add the pg-amplify-detail-url attribute to tell the summary widget where the detail widget is hosted:

<!-- Summary widget on the homepage -->
<div
  class="amplify-summary"
  pg-amplify-widget-id="my-clinic-123"
  pg-amplify-person-id="dr-smith"
  pg-amplify-detail-url="/reviews"
></div>

When a user clicks a navigation link in the summary widget, they are redirected to the specified URL and the detail widget automatically opens the correct tab. No additional configuration is required for same-domain navigation.

note

If you are redirecting across completely different domains, the target domain must be whitelisted in your allowedOrigins configuration. See Cross-Domain Security below.

Hash-Based Deep Linking​

You can link directly to a specific tab of the detail widget from any external source (e.g., an email newsletter or a navigation menu) using URL hashes.

When the detail widget detects a matching hash in the URL on page load, it automatically scrolls into view and opens the designated tab.

Hash Format​

#amplify-{section}-{appid}

The {appid} suffix ensures the correct widget is targeted if multiple exist on the same page.

Examples​

Open to the main reviews list:

https://yoursite.com/reviews#amplify-patientreviews-my-clinic-123

Open directly to the comments tab:

https://yoursite.com/reviews#amplify-comments-my-clinic-123

Secure Cross-Domain Linking​

In some setups, the summary widget may be hosted on one domain (e.g., https://site-a.com) and the detail widget on a different domain (e.g., https://site-b.com).

Allowing one website to trigger scrolling and tab-switching on another presents a security risk. To prevent abuse, the widgets use a strict cross-origin security whitelist via the allowedOrigins configuration field.

How It Works​

Cross-domain navigation is validated server-side against an allowedOrigins allowlist in your widget configuration. Navigations from domains not on the list are silently blocked.

What You Need to Do​

If you plan to link widgets across different root domains, ensure the origin domain (where the summary widget lives) is explicitly added to the allowedOrigins array in your Amplify Widget configuration.

Navigations that occur entirely within the same domain do not require whitelisting.

See the Reference for the full list of widget attributes, and the error messages table for cross-origin error diagnostics.