Embedding

Some partners may wish to embed our plugin directly into their application for a seamless user experience. This guide outlines the requirements and steps to securely embed the plugin using an iframe or other WebView.

Prerequisites

• You must be an approved distributor.
• You must provide a list of allowed domains for both PRODUCTION and SANDBOX environments.
• Only requests from approved domains will be permitted to embed the plugin.

Allowed Domains

Distributors are required to provide a list of approved domains for our PRODUCTION and SANDBOX environments. Requests from non-approved domains will be blocked from embedding content.

If a request is made from an non-approved domain, X-Frame-Options=DENY;Content-Security-Policy="frame-ancestors 'none'" headers will be attached to the response. Presentation of the failure to request plugin will be determined by the application or web framework used in your own application.

To update your allowed domains, contact your integration manager or support.

Embedding via iframe

The recommended way to embed the plugin is via an HTML <iframe>. Example:

<iframe
  src="https://(sandbox.)app.sync-savings.com?token=[INSERT_GENERATED_TOKEN]"
  width="100%"
  height="600"
  frameborder="0"
  referrerpolicy="strict-origin-when-cross-origin"
  allowfullscreen
></iframe>

Required iframe attributes

• referrerpolicy="strict-origin-when-cross-origin" — Ensures the correct referrer is sent for security.

Referrer Header

Ensure the host domain is included in the referrer header. Some frameworks or agents may require manual configuration to ensure this header is set correctly.

Authentication

Signed payload must be attached to src url. See token generation

Embedding in Common Frameworks

Most frameworks support embedding web content, often via an iframe or web view. For detailed instructions, refer to the official documentation for your framework:

• React: Embedding Content
• Angular: Security and iframes
• Vue.js: Using iframes
• Svelte: HTML and iframes
• Android WebView
• iOS WebView
• .NET MAUI WebView
• Flutter WebView

For other frameworks or platforms, refer to their official documentation for embedding external web content securely.

Security Considerations

• Only approved domains can embed the plugin.
• The plugin will reject requests from unapproved origins.
• Always use HTTPS for embedding.

Troubleshooting

• Blocked by CORS or domain restrictions: Ensure your domain is on the approved list.
• Plugin not loading: Check the iframe src URL and required attributes.
• Referrer issues: Verify the referrerpolicy attribute and your application’s referrer settings.

For further assistance, contact support.