Skip to main content
Start selling

Embed the Freemius Customer Portal into your website

You can provide your customers with easy access to their accounts by either adding a direct link to the Customer Portal on your website or embedding it directly into your site.

If you have a website, we recommend adding a direct link to the portal to make it easier for your customers to access their account. The Customer Portal URL takes the structure below:

https://customers.freemius.com/store/<storeID>

Where <storeID> is your unique store identifier. Here are the steps to find your Store ID in the Store's settings.

Embedding the Customer Portal in Your Store​

Alternatively, you can embed the portal directly on your site. The customer portal has been designed to work for this exact use case, keeping users on your store and making the portal feel native to your site.

Embedding Into a WordPress Website​

  1. Install and activate Freemius Customer Portal WordPress Plugin.
  2. Create a new page on your website. We recommend using one of the following slugs: users, account, members. Save the page's link to be used in step 4.
  3. Go to the Stores settings.
  4. Scroll to the Customer Portal section.
  5. In the Customer Portal URL setting, paste the URL address of the page created (in step 2). Make sure the protocol (HTTP or HTTPS) is accurate, otherwise, the portal will not load.
  6. Add this shortcode to the page you created:
[fs_members store_id="<storeID>" public_key="<storePublicKey>" position="fixed" left="0" right="0" top="<headerHeight>px" bottom="0"]

  1. Replace the following placeholders in the shortcode with your information:

    • <storeID> - with your store ID.
    • <storePublicKey> - with your store's public key.
    • <headerHeight> - with your site's header height.

    These keys can be found in the Store's settings.

Responsive Header Height

If your site’s header height is responsive, you can customize the dashboard’s position with media queries by styling the iframe’s <div id="fs_dashboard_container"> container as follows:

#fs_dashboard_container {
   top: {headerDesktopHeight}px;
}

@media screen and(max-width: 600px) {
   #fs_dashboard_container {
      top: {headerMobileHeight}px;
   }
}

Find Store Settings​

  1. Log into your Freemius Developer dashboard.
  2. Navigate to your store by clicking Stores in the top-left panel under the Freemius logo.
  3. Select your store by name.
  4. Scroll to the down the menu and select the Settings page.
  5. In the keys section, you will find your store ID.

Disabling Redirect to WordPress Login Page​

Users might be redirected to the default WordPress login page when they log out of the embedded Customer Portal. To disable this behavior, add the following code snippet to the bottom of your active theme's functions.php file:

function my_fs_members_dashboard_config( $config ) {
    $config = str_replace( 'window.location.href', '// window.location.href', $config );
    return $config;
}

add_filter( 'fs_members_dashboard', 'my_fs_members_dashboard_config' );

Customizing the Customer Portal Appearance​

For the Customer Portal to match your website and brand look, find up-to-date instructions on customizing the Customer Portal appearance with CSS.

On this page: