Skip to content
Search Articles/

less than a minute read • Updated 12 days ago

Embed a customer portal In Framer

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

Overview

Our embeddable customer portal can be added to your Framer website in minutes, creating a secure and easy way for your customers to view order history, manage subscriptions, and more... all inside your Framer website.

Try It Out

Enable Customer Portal

  1. 1

    From the Foxy Admin, go to Settings > Customer Portal.

  2. 2

    For Allowed Origins, specify which domains you want to allow the customer portal to be installed on.

  3. 3

    Configure other options as needed.

  4. 4

    Click Enable.

Add Code Snippets

  1. 1

    In Framer, navigate to the Assets tab.

  2. 2

    Click the + button under the Code section and create a new code file.

  3. 3

    Enter a title for the code file (ex: FoxyCustomerPortal).

  4. 4

    Choose New Component and click Create.

  5. 5

    Remove all example code in the code editor.

  6. 6

    Copy the code below and paste in the code editor:

    import { useEffect, useRef } from 'react';
import { addPropertyControls, ControlType } from 'framer';

export default function FoxyCustomerPortal({ foxyStoreDomain }) {
  const scriptLoadedRef = useRef(false);

  useEffect(() => {
    if (!scriptLoadedRef.current) {
      const script = document.createElement('script');
      script.type = 'module';
      script.textContent = `
        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\`)
        );
      `;
      document.body.appendChild(script);
      scriptLoadedRef.current = true;
    }
  }, []);

  return (
    // @ts-ignore
    <foxy-customer-portal base={`https://${foxyStoreDomain}/s/customer/`}></foxy-customer-portal>
  );
}

addPropertyControls(FoxyCustomerPortal, {
  foxyStoreDomain: {
    title: 'Store Domain',
    type: ControlType.String,
    description: 'Your Foxy store domain',
    placeholder: 'your-foxy-store.foxycart.com',
  },
});
  7. 7

    Add the customer portal element to anywhere on your site.

  8. 8

    Click on the customer portal element.

  9. 9

    In the element settings, looks for the FoxyCustomerPortal section.

  10. 10

    In the Store Domain field, enter your Foxy store domain (ex: your-foxy-store.foxycart.com).

  11. 11

    Publish the site and test.

Give Customers Access

To give customers access simply add a link to the customer portal page anywhere on your website. Only customers who created an account at checkout will be able to login. By default, customer accounts are enabled, but if you disabled them, you can enable them again from the Foxy Admin > Settings > Checkout > Customer accounts.

Style Customer Portal

The Foxy customer portal uses the Lumo Theme for styling and elements. You can quickly and easily make styling changes by following the instructions below:

  1. 1

    Load up the Lumo Theme Editor here.

  2. 2

    Make desired style changes.

  3. 3

    Click the download button.

  4. 4

    Copy the the displayed snippet.

  5. 5

    In Framer, go to Site Settings > Custom Code.

  6. 6

    Add a new script by clicking the + button.

  7. 7

    Configure the settings as follows:

    - Name: Foxy Customer Portal Style (can be whatever you want)

    - Placement: End of <body>

    - Page: choose the page containing the customer portal (ex: /account)

    - Run: Once

  8. 8

    Paste the copied snippet in the code editor.

  9. 9

    Save and publish the site.

Enable Single Sign On

Please follow the instructions below to keep logged in customers for the customer portal, logged in on the Foxy checkout as well.

  1. 1

    In Foxy Admin, go to Settings > General.

  2. 2

    Copy the Universal store secret (or SSO secret) value under "Store secrets".

  3. 3

    Go to the CyberChef website here.

  4. 4

    Replace "YOUR_SECRET_HERE" with the store secret you copied in Step 2.

  5. 5

    Copy the output value.

  6. 6

    Create a blank page in Framer (the name and slug of the page can be anything).

  7. 7

    In Framer, go to Site Settings > Custom Code.

  8. 8

    Add a new script by clicking the + button.

  9. 9

    Configure the settings as follows:

    - Name: Foxy SSO (can be whatever you want)

    - Placement: End of <body>

    - Page: choose the newly created page for SSO

    - Run: Once

  10. 10

    Go to this link: https://pastebin.com/raw/9Yz8LLYd and copy the code on the page.

  11. 11

    Paste the code in the code editor.

  12. 12

    Replace "FOXY_SUBDOMAIN" with your Foxy subdomain, like mystore.foxycart.com or secure.mystore.com.

  13. 13

    Replace "SECRET_OUTPUT" with the output value from Step 5.

  14. 14

    Save and publish the site.

  15. 15

    In Foxy Admin, go to Settings > Checkout.

  16. 16

    Under Advanced, toggle Enable SSO.

  17. 17

    In the SSO endpoint field, paste the url of the new page you created in Framer.

  18. 18

    Save changes.

  19. 19

    Test by logging into the customer portal, add a product to cart, and proceed to checkout. You should be logged in on the checkout page.

Extend Customer Portal

The customer portal can be extended with new functions and features. Please don't hesitate to contact us if you have a specific use case or need.

Need Help?

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