Skip to content
English
Login
  • There are no suggestions because the search field is empty.

Creating a WoodsPortal Page in HubSpot

Learn how to build and publish a customer portal page using the WoodsPortal theme within your HubSpot website.

 

Once the WoodsPortal theme is installed in your HubSpot Design Manager, you can create a dedicated portal page that renders WoodsPortal’s frontend and connects to its backend API. Follow these steps to set up, configure, and publish your customer portal page.

Before you begin

  • You must have already connected your HubSpot account and created a WoodsPortal client portal (see Installing WoodsPortal).

  • Ensure the WoodsPortal theme and template have finished installing in Design Manager (allow 1–2 minutes).

 

The theme handles design; the WoodsPortal backend handles data flow and authentication.

 

Step-by-Step Instructions

  1. Create a New Website Page

    • In HubSpot, navigate to Content > Website Pages.

    • Click Create, then choose Website page.

    • Select the domain you configured when creating your WoodsPortal client portal.

    • Enter a Page name (for internal reference) and click Create page.

  2. Apply the WoodsPortal Theme & Template

    • In the page editor, open the Theme dropdown and select WoodsPortal.

    • Under Template, choose WoodsPortal Template.

    • If you see a redirect error banner, simply close it—this does not affect portal functionality.

      Why you see a redirect issue in HubSpot:
      HubSpot’s editor expects standard page URLs (e.g., /login). When it encounters a # in the URL (e.g., /#/login), it interprets this as a potential redirect or reload action. This can trigger an error or warning about redirection while editing or previewing the page in HubSpot.

      Why we’re using # in the URL (HashRouter):
      We use a HashRouter to manage navigation within the app without reloading the entire page. The # in the URL indicates a specific "view" or "state" of the app (e.g., switching from login to dashboard). This prevents full-page reloads and improves performance, but can confuse HubSpot’s page editor.

  3. Configure the WoodsPortal Module

    • On the left sidebar, click Contents to expand the content modules.

    • Under Main content, click the WoodsPortal module.

    • Locate the WoodsPortal Admin URL field and ensure it displays the admin backend URL https://woodsportal.digitalwoods.io .

    • Explore the three module tabs: Dashboard, Menu options, and Branding to adjust your portal’s look and navigation.

  4. Set Page Settings

    • Click the Settings tab in the page editor.

    • Under General, enter a Page title (visible in browser tabs) and confirm the Page URL matches your portal domain/subdomain.

    • (Optional) Remove or adjust the Content slug—note that WoodsPortal can only be installed once per (sub)domain.

  5. Publish the Page

    • Once settings are complete, the Publish button will activate.

    • Click Publish, then Open page in new tab to verify your portal loads correctly.

    • Use your WoodsPortal credentials to log in.
The CMS Editor preview is not supported with this theme, so you'll have to publish the page after making any changes to view them in the portal.

Troubleshooting

Issue Resolution
Redirect error banner appears This is expected on login-protected pages; click the X to dismiss and continue editing.
Unable to select WoodsPortal theme or template Wait 2–3 minutes for installation to finish, then refresh Design Manager and Website Pages.
Admin URL field is blank Recheck your client portal’s backend URL on the Client Portals page in WoodsPortal.