Skip to content
Search Articles/

less than a minute read • Updated 10 minutes ago

Add the customer portal to your website

How to embed the Foxy customer portal element on your site.

Once the customer portal is enabled in your Foxy admin, you add it to your site by embedding the foxy-customer-portal element and its script.

Steps

  1. 1

    Add the following to your page, replacing YOUR_FOXY_STORE.foxycart.com with your store’s Foxy subdomain (or custom subdomain, if configured):

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

   <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

    Publish the page. The portal will show a login form, and customers can sign in with the email and password used at checkout.

You can see a working example on the customer portal demo page.

Notes

  • The @1 in the CDN URLs points to the current stable release and updates automatically. To try beta releases, use elements@beta instead — not recommended for production.

  • If you’re customizing your portal (adding custom elements or translations), lock to a specific version instead of @1, for example elements@1.28.0. Check the Elements GitHub releases for the latest version, and watch that repository for updates.

  • You can also load the portal from a third-party CDN like jsDelivr, though the Foxy CDN is recommended unless you have a specific reason not to:

  https://cdn.jsdelivr.net/npm/@foxy.io/elements@1/dist/cdn/foxy-customer-portal.js
  https://cdn.jsdelivr.net/npm/@foxy.io/elements@1/dist/cdn/translations

Need Help?

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