<!--
canonical_url: https://university.spiffy.co/customer-portal/embedded-portals/
post_id: 4141
post_type: post
last_modified: 2023-10-25T16:34:35+00:00
generated_at: 2026-04-16T16:18:10+00:00
-->

# Embedded Portals

Embed your customer portal, or affiliate portal into your own membership site, or software application. This makes it possible for your customers to update their credit card information within a single login, with 2FA via email.

# What Are Embedded Portals?

We make it possible for you to embed your **_[Customer Portal](https://university.spiffy.co/customer-portal/intro-to-customer-portal.md)_**, your _**[Affiliate Portal](https://university.spiffy.co/affiliates/affiliate-portal.md)**_, and your [**_Affiliate Registration_**](https://university.spiffy.co/affiliates/affiliate-registration.md) on your own website, or within your online course, membership site, or software app.

This makes the user experience of updating credit cards more streamlined and uniform.

Instead of your customers going to a spiffy.co page to enter their email address, and access their spiffy.co customer portal, you can have your customers access the Spiffy Customer portal on your own domain name.

This is the same concept as embedding Checkouts on your own website.

**Here’s the flow of what your customers will experience:**

1. On your website, you will embed the Spiffy Portal URL where customers enter their email address
2. Your customer will receive an email with a ‘magic link’.
    _(The ‘magic-link’ is a time-sensitive, single-use link that will expire when clicked or after 1-hour)_
3. Your customer clicks on the magic link and will be redirected back to your website where the portal is embedded and is automatically logged in to your Spiffy Portal that will now display in the embed

**In this article we will go over the steps required to embed your portals:**

- [Add SpiffyJS to your website/app](#add-spiffyjs-to-your-websiteapp)
- [Set your domain name as a Trusted Domain](#set-your-domain-name-as-a-trusted-domain)
- [Add the Portal Embed Element to your website/app](#add-the-portal-embed-element-to-your-websiteapp)
- [Additional Settings And Controls](#additional-settings-and-controls)

## Add SpiffyJS to your website/app

The SpiffyJS code that you need to embed your Portals is the same code you use to embed checkouts, upsells, and affiliate tracking.

You will find the SpiffyJS code under your account level settings.

Click on **Settings** > **General** in the bottom left navigation

![](https://university.spiffy.co/wp-content/uploads/2022/08/Screen-Shot-2022-08-29-at-10.08.52-PM.png)If you haven’t already, it’s a best practice to just add your SpiffyJS code to the header of your website, or in Google Tag Manager, so that it loads on every page on your website.

## Set your domain name as a Trusted Domain

The **_Trusted Domains_** setting is what makes it possible for us to send people back to your website when they click the ‘magic-link’ in the email we send. We will send your customers back to the URL they entered their email on as long as the domain is listed here.

Click on **Settings** > **General** in the bottom left navigation

![](https://university.spiffy.co/wp-content/uploads/2022/08/Screen-Shot-2022-08-29-at-10.10.16-PM.png)If you do not add a _Trusted Domain_ at your account-level settings, your customers will simply be redirected to the Spiffy-hosted Customer Portal.

## Add the Portal Embed Element to your website/app

Go to our Developer Docs, navigate to the Elements tab, and grab our Portals embed Element.

[Click here to visit Elements in Developer Docs](https://developers.spiffy.co/spiffyjs/elements#portals)

Copy the code snippet that looks like the screenshot below, and paste it onto the page on your website where you want your portal embedded.

![](https://university.spiffy.co/wp-content/uploads/2022/08/Screen-Shot-2022-08-29-at-10.09.27-PM.png)_**Pro Tip:**_

You can edit the _Portals Element_ to embed your _Customer Portal_ and _Affiliate Portal_ on separate pages. In the Portals Element code, change the word “customer” to “affiliate” to change which portal is embedded on a specific page on your website.

## Additional Settings And Controls

We have additional code that you can add to your SpiffyJS snippet that gives you more nuanced control over your Portal and Checkout embeds.

  example

You can adjust your Customer Portal embed to be very minimialistic and only display Subscriptions records. Under the _Portal Options_ you would turn everything to **_true_** and leave subscriptions set to **_false_**.

We have more information, instructions, and code you can copy/paste in our developer docs.

[Learn more about Portal Embed controls in our Developer Docs](https://developers.spiffy.co/spiffyjs/config)

![](https://university.spiffy.co/wp-content/uploads/2022/08/Screen-Shot-2022-08-30-at-12.36.19-AM.png)
