Skip to content
Search Articles/

less than a minute read • Updated 5 hours ago

Embed a customer portal in Webstudio

Easily embed Foxy Commerce's customer portal into any page in your Webstudio website. Once embedded, customers can view order history, manage subscriptions, and more... right inside of your Webstudio website.

Overview

Foxy's drop-in customer portal lets customers view order history, manage subscriptions, and update billing or shipping details directly on your Webstudio site.

Try It Out

Enable the customer portal

  1. 1

    Go to the Foxy admin

  2. 2

    Go to Settings > Customer Portal

  3. 3

    Under Allowed origins, add the domains the portal will run on (up to 10). Must be https unless it's localhost.

  4. 4

    Under Features, turn on any of SSO (single sign-on), Customer registration, Frequency changes for subscriptions, Next payment date changes for subscriptions as needed

  5. 5

    Click Save changes

Add the required scripts

  1. 1

    Go to Settings > Website & Products and copy the snippet from Foxy loader.js

  2. 2

    In Webstudio, open the Webstudio logo menu (top left) and select Project Settings

  3. 3

    In the General section, paste the loader snippet into the Custom Code field

  4. 4

    Directly after it, paste this snippet:

  5. 5

<script type="module">
    import 'https://cdn-js.foxy.io/elements@1/foxy-customer-portal.js';
    const I18nElement = customElements.get('foxy-i18n');
    const i18nBase = 'https://cdn-js.foxy.io/elements@1/translations';
    I18nElement.onResourceFetch((ns, lang) => fetch(`${i18nBase}/${ns}/${lang}.json`));
</script>
  1. 1

    Save changes

Install the customer portal element

  1. 1

    In Webstudio, create the page where the portal should appear

  2. 2

    Add an HTML Embed element where you want it to load

  3. 3

    Inside the HTML Embed element, paste:

<foxy-customer-portal base="https://CHANGE.foxycart.com/s/customer/">
</foxy-customer-portal>
  1. 1

    Replace CHANGE with your store subdomain (found under Settings > General), or the full custom domain if you're using one

  2. 2

    Publish and test

Give customers access

Link to the customer portal page from anywhere on your site. Whether new customers can create an account at checkout is controlled by the Customer registration toggle under Settings > Customer Portal > Features.

Style the customer portal

The portal uses the Lumo theme. Only the Light theme is currently supported, though you can adjust it for a dark background.

  1. 1

    Open the Lumo Theme Editor

  2. 2

    Make your style changes and click download to get the snippet

  3. 3

    In Webstudio, go to the customer portal page's settings and paste the snippet into Inside <head> tag

  4. 4

    Publish changes

Enable single sign-on

SSO keeps a customer logged into the portal and checkout at the same time.

  1. 1

    Go to Settings > Customer Portal and turn on SSO (single sign-on) under Features

  2. 2

    In Webstudio, create a page with the slug /sso

  3. 3

    Add this snippet to that page's Before </body> tag setting:

html

<script>
function parseJWT(token) {
  let base64Url = token.split(".")[1];
  let base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
  let jsonPayload = decodeURIComponent(
    atob(base64)
      .split("")
      .map(function (c) {
        return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2);
      })
      .join("")
  );

  return JSON.parse(jsonPayload);
}
function getSSOUrl() {
  // Look for a cookie
  var value = "; " + document.cookie;
  var parts = value.split("; " + "fx.customer.sso" + "=");
  if (parts.length == 2) return decodeURIComponent(parts.pop().split(";").shift());

  // Look for localstorage
  try {
    let sessionStore = JSON.parse(localStorage.getItem("session"));
    if (sessionStore && sessionStore.hasOwnProperty("jwt")) {
      let sessionData = parseJWT(sessionStore.jwt);
      let expires =
        Math.floor(new Date(sessionStore.date_created).getTime() / 1000) + sessionStore.expires_in;
      if (
        expires > Math.floor(Date.now() / 1000) &&
        sessionData.hasOwnProperty("customer_id") &&
        sessionStore.hasOwnProperty("sso")
      ) {
        return sessionStore.sso;
      }
    }
  } catch (error) {
    console.log("Error trying to get SSO URL:", error);
  }

  return false;
}

function getUrlParameter(name) {
  return new URLSearchParams(location.search).get("fcsid");
}

if (getSSOUrl()) {
  window.location.replace(getSSOUrl() + "&fcsid=" + getUrlParameter("fcsid"));
} else {
  window.location.replace(
    "https://FOXY_SUBDOMAIN/checkout?fc_customer_id=0&timestamp=1893456000&fc_auth_token=SECRET_OUTPUT&fcsid=" +
      getUrlParameter("fcsid")
  );
}
</script>
  1. 1

    Replace FOXY_SUBDOMAIN with your store subdomain or custom domain

  2. 2

    Generate SECRET_OUTPUT:

    • Go to CyberChef (recipe is already set to SHA1)

    • In the Input field, replace YOUR_SECRET_HERE in 0|1893456000|YOUR_SECRET_HERE with your store's Universal store secret (Settings > General > Store secrets). Leave the 0 and 1893456000 as they are, since they match the fc_customer_id and timestamp in the snippet above.

    • Copy the SHA1 output into SECRET_OUTPUT in the snippet

  3. 3

    Publish the page. No separate "SSO URL" field needs to be set in the admin — the page just needs to exist at /sso on the same origin.

  4. 4

    Test by logging into the portal, adding a product to cart, and going to checkout. You should stay logged in.

Extend the customer portal

The portal can be extended with custom functionality. Contact Foxy if you have a specific use case in mind.

Notes

  • Only Foxy customer accounts can log into the portal; whether new customers can register is controlled by the Customer registration toggle

  • Changing the Universal store secret invalidates the token in this snippet, so it will need to be regenerated

  • Session lifespan (default 4 weeks) controls how long a customer stays logged in without activity, set under Settings > Customer Portal > Security settings

Need Help?

Did this article answer your questions? Need help with anything? Please click below to contact us.