Embedding the Loop Customer Portal via Iframe

Overview

This guide provides a technical walkthrough for developers looking to embed the Loop Customer Portal directly into their own web application (e.g., Shopify Hydrogen or a custom frontend of any framework) using an iframe.

By using our embedCustomerPortal API, you can provide a seamless, white-labeled subscription management experience without redirecting users away from your primary domain.

What’s Covered:

• Authentication: Using Admin APIs to generate secure session tokens.
• API Implementation: How the Loop Sentinel service handles portal requests.
• Frontend Integration: Implementing the iframe in a React/Hydrogen environment.
• Security: Configuring CSP headers for safe embedding.

Prerequisites

Before starting the integration, ensure you have:

1. Admin API Access: You must be able to perform server-side calls to Loop’s Admin API.
2. Domain Whitelisting: Contact the Loop support team to allow your specific domain to frame the portal.
3. Shopify Storefront: A valid Shopify domain and customer context.

1. Authentication & Security

The embedding process relies on a short-lived sessionToken. This token ensures that the customer data remains secure even when accessed via a client-side iframe.

Generate a Session Token

Call the Loop Admin API from your backend to generate a token for the specific customer using

Session Token: Generate the session token, which expires after 24 hour. This token can be generated using this Admin api endpoint.

Content Security Policy (CSP)

To prevent Clickjacking, Loop enforces a strict frame-ancestors policy. Ensure your environment matches the allowed ancestors:

• https://*.shopify.com
• https://*.myshopify.com
• Your whitelisted custom domain.

2. The API: embedCustomerPortal

Loop provides a dedicated endpoint to fetch the portal assets and stream them directly into your application.

Request Schema

The endpoint expects the following query parameters:

3. Implementation Example (React/Hydrogen)

To embed the portal, construct the URL with the required parameters and pass it to a standard <iframe> element.

API Base URL - https://sentinel.loopwork.co

import { useSearchParams } from 'react-router-dom';

/**
 * CustomerPortal component to render the Loop portal inside an iframe.
 */
export default function CustomerPortalEmbed() {
  const [searchParams] = useSearchParams();
  
  // Base Sentinel URL (Use production URL for live stores)
  const BASE_URL = "https://sentinel.loopwork.co/embedCustomerPortal";
  
  // Configuration
  const config = {
    shop: "your-brand.myshopify.com",
    locale: "en",
    country: "US",
    rootUrl: "/customer/{customerID}", // Targeted portal page
    sessionToken: "66b716ce84904beabf9a198dac339130" // Dynamically fetched
  };

  const queryParams = new URLSearchParams(config).toString();
  const iframeUrl = `${BASE_URL}?${queryParams}`;

  return (
    <div style={{ width: '100%', height: '85vh', overflow: 'hidden' }}>
      <iframe
        src={iframeUrl}
        style={{
          width: '100%',
          height: '100%',
          border: 'none',
        }}
        title="Loop Customer Portal"
        allowFullScreen
      />
    </div>
  );
}

4. Known Limitations

When using the iframe method, certain native browser/portal behaviors require manual handling or aren't supported until now:

1. Email Deep Links: Standard notification emails from Loop point to the standalone portal. You must intercept or update your email templates to point to your custom hosted page with the appropriate rootUrl.

2. Multilingual Support: While the locale parameter is supported for Loop's powered translations, but product titles and custom descriptions are translated only within the Shopify Theme to display correctly.

3. Smart Recommendations: In Upsell when recommendation type is set as Smart recommendations in Personalized upsell profiles that rely on Shopify data, is not supported.

Related Documentation

• Building a headless customer portal

• Building a customer portal step by step