--- title: REACT and HubSpot description: react apps in HubSpot image: https://hub.innohub.space/hubfs/hs-scale-1.png --- [![ihs-ico-transparent-40](https://hub.innohub.space/hubfs/ihs-ico-transparent-40.png)](https://hub.innohub.space) - EXPERIENCE ![exp-s1-1-1](https://hub.innohub.space/hs-fs/hubfs/exp-s1-1-1.png?width=200&height=134&name=exp-s1-1-1.png)   ## What de build on HubSpot We implement it for business purposes and we are skilled in developing on the platform with HubL, APIs, HubDB, serverless functions and custom modules [LEARN MORE](https://hub.innohub.space) ### [Static websites Company website and landing pages represents your window to the world. We build clear and shiny windows for you.](https://hub.innohub.space#pmc-hs-experience-static-sites) ### [Platform We combine our outstanding business expertise with the HubSpot platform and create the best management tool for you](https://hub.innohub.space#pmc-hs-experience-platform) ### [Dynamic sites Add HubSpot dynamic content to your site and enhance customer communication](https://hub.innohub.space#pmc-hs-experience-dynamic-sites) ### [Business Intelligence Combine HubSpot data with other available data and get advanced dashboards and reports ](https://hub.innohub.space#pmc-hs-experience-reporting-bi) ### [Advanced CMS Be one of the kind with state-of-the-art custom modules and powerful apps embedded in your site](https://hub.innohub.space#pmc-hs-experience-custom-modules) ### [Mastering API Surprise your customer and allow them to automate data exchange with you](https://hub.innohub.space#pmc-hs-experience-api-integration) - REACT ![ict-scale](https://hub.innohub.space/hs-fs/hubfs/ict-scale.png?width=200&height=157&name=ict-scale.png)   ## Add dynamic content Integrate external React apps and components in your HubSpot CMS site using ERA custom module [LEARN MORE](https://hub.innohub.space/react) ### [Concept Discover how React can increase the experience of users when visiting your HubSpot CMS website](https://hub.innohub.space/react#what-we-have-here) ### [Features See what features are available in ERA custom module](https://hub.innohub.space/react#era-features) ### [DEMO Explore the demo information about the React apps on this page and see how it works](https://hub.innohub.space/react#era-try) ### Component 1 Click on the component name above and trigger the first embedded React component directly from here ### Component 2 Click on the component name above and trigger the second embedded React component directly from here - WIP ![cyber-scale](https://hub.innohub.space/hs-fs/hubfs/cyber-scale.png?width=200&height=163&name=cyber-scale.png)   ## Work in progress See what we develop on HubSpot and contact us for more information or for potential partnerships [LEARN MORE](https://hub.innohub.space/work-in-progress) ### [For Wordpress We are working to make the integration with Wordpress as easiest as possible and to bring the power of the most popular CMS into HubSpot](https://hub.innohub.space/work-in-progress) ### [For WASM We will bring power of C++ into HubSpot CMS, and open new possibilities to extend the options available for building awesome sites on HubSpot](https://hub.innohub.space/work-in-progress) ### [For AZURE Using AZURE cloud we integrated HubSpot data with many other sources and delivered a very solid reporting base for our customers](https://hub.innohub.space/work-in-progress) ### [For Auth0](https://hub.innohub.space/work-in-progress) [We integrated Auth0 with HubSpot by customising the login flow. The integration package is available on ](https://hub.innohub.space/work-in-progress)[npm](https://www.npmjs.com/package/ihs-auth0-integrations) and can be used for free. ### [For GitHub We want to empower your creation and development team to enhance our work. We are constantly improving our delivery and deployment capabilities](https://hub.innohub.space/work-in-progress) ![Checking...](https://hub.innohub.space/hubfs/hub-ihs/eq-loader.gif) # INTRO We are building something awesome here and this is work-in-progress. This page is mostly dedicated to site builders and devs and we want to demonstrate how to create very dynamic web sites combining the power of HubSpot with advanced web technologies. We will use custom HubSpot modules for including React apps, we will integrate a third party identity provider and we will make it dynamic and interactive. [Start building now](https://pmc-expert.com/contact) [See what we work on](https://hub.innohub.space/work-in-progress) ![ict-scale](https://hub.innohub.space/hubfs/ict-scale.png) WHAT WE HAVE HERE ### React + HubSpot = ❤️ This page is a demo of integrating HubSpot CMS with external React apps. Now the future looks better, we can have very dynamic websites built on  the awesome HubSpot CMS and bringing in the flexibility of React. You can, now, publish dynamic content from any headless CMS (such as Contentful or Wordpress). If you combine, for example, the power of ACF and Custom Post Types from Wordpress, then only your imagination would be the limit of what you can achieve. We use our External React Application (ERA) custom module to publish demo React apps on this page. The apps are built as separated collection of components, so any React component from any React app can be published anywhere on this site. ##### THIS IS A DEMO PAGE AND NONE OF THE FUNCTIONALITY WILL GENERATE EFFECTS OR WILL SAVE ANY DATA ON YOUR COMPUTER OR ON OUR SERVERS. [CONTACT US TO LEARN MORE](https://pmc-expert.com/contact) ERA #### External React App custom module to publish your content and apps We developed a very flexible HubSpot custom module to publish React Apps using HubSpot CMS. REDUX #### REDUX support for better user experience and advanced functionality The whole site, not only the React apps use a common REDUX store. That's awesome, data can be shared between the main site, any React component, even if multiple tabs or browser windows are open. NOTIFICATION HUB #### Common messaging for everything The whole site use an integrated messaging app, you probably noticed the message bubbles when loading this page. ![hs-scale](https://hub.innohub.space/hubfs/hs-scale.png "hs-scale") ERA MODULE POWERFUL FEATURES ## FULLY CONFIGURABLE CUSTOM MODULE #### Position anywhere Show the React component as you like. Fixed, floating and resizable entering from side, any position is possible. #### Style as you like Pick your perfect combination of colours and styles as it fits to your website design theme. #### Integrate workflows Connect your component to REDUX and start sharing data inside your desired workflows. #### Happy coding Use the IDE of your choice and deploy your code directly to HubSpot CMS file system or to npm registry #### Relax, we got your back! No worries, display configuration for your app and components is always saved automatically. No need to resize or reposition each time when open a new session #### Deploy with joy Use our GitHub actions to automatically deploy to HubSpot and enjoy careless deployment #### You have message 💬 Connect to the common messaging bus and configure the notifications you want to show #### Trigger app like a pro Configure app triggers as you like. Keywords, buttons, elements ... anything is possible for showing your app or component ![hs-scale](https://hub.innohub.space/hubfs/hs-scale.png "hs-scale") ![prod-home-s1](https://hub.innohub.space/hubfs/prod-home-s1.png "prod-home-s1") # TRY IT NOW ### Context We embedded two React Components from two totally different React apps. Each React app is built as a collection of components and each component is connected to the common Redux store and to the common notification app. Positioning and appearance is different for each component and fully customisable from the ERA HubSpot custom module, in HubSpot CMS editor. ### Try Observe each the component's trigger. We configured a trigger button, an HTML element trigger (the component name) and some keywords triggers (marked in light yellow). Click on triggers to see the components. Having both components on screen, click on the buttons to see how the common Redux store works. Open a new browser tab or even a new browser window, reload the page and click on the buttons inside React components. You will observe that all tabs/windows are in sync. Resize, reposition the floating component and refresh the page, you will see that the configuration is automatically saved. Close the browser window (you can even clear the cache if you like) and reopen this page, you will observe that the size and positioning configuration is still there. ### Notifications Each component is connected to the common messaging/notification bus. You will observe the notification bubbles when loading or refreshing this page. No worries!!! This is the way in which this page is configured, it doesn't mean that all notifications will be shown in real life, we only want to demonstrate one of the functionalities. ### For site builders You will observe some error messages below the next section of the page. No worries!!!! There is no real error here, everything works fine. We did it in purpose to show what you can see if something goes wrong when loading React apps/components. This feature is configurable in the HubSpot CMS editor, it can be disabled, but is good to have it when building the site. However, even if the feature is active, no error is shown in real life if everything works as expected. ### Identity management You will observe a login button in the page header (or in the menu page on mobile) . This is because we integrated this site with Auth0, so a wide range of use cases are possible, including API authentication to external APIs, content management, SSO and many more. Great stuff!!! You can try this feature too but you need to register with our innohub.space. No worries!!! Is harmless, we do not use this information for any purpose, now or in the future. After login or logout, check the browser console to observe the changes. However, please check our [Privacy](https://innohub.space/eng/privacy/) and [Cookie](https://innohub.space/eng/cookie-policy/) policies before registering with us. ### Component 1 The react app is developed and built outside HubSpot. It is automatically deployed using GitHub actions and loaded using ERA module. It also loads one of the app components. Once loaded, it connects to the Common Redux Store and use it. It also connects to the Message Hub. Common Redux Store and Message Hub are also external react apps embedded in the global content. Trigger Component 1 ERA HubSpot CMS Module Relax, I'm loading ... ### Component 2 The react app is already loaded in page. This is a single component of the app that renders in its own root div. If the component is set to work with Redux Store, then is automatically connected to the store and can also broadcast notifications with the Message Hub. The React App must be designed to render each component in its own root div in order to make this work. Trigger Component 2 ERA HubSpot CMS Module Component Relax, I'm loading ... **No worries!!! Everything is fine here. The errors on the bottom of page are triggered by us just to show what to expect if something goes wrong when loading React components. Detailed information about what went wrong is shown in HubSpot CMS editor. Error info can be pushed to browser console too (check it), but this feature is configurable in HubSpot CMS editor.**   Relax, I'm loading ... Aww!!! I feel that something should be here but is not! Seems that the content is not loaded, or something went wrong. Maybe you should contact the site admin. Aww!!! I feel that something should be here but is not! Seems that the content is not loaded, or something went wrong. Maybe you should contact the site admin. **innohub.space** ### HUB SPACE - [Innohub](https://innohub.space) - [Meet us](https://innohub.space/eng/ihs/book-a-meeting/) - [Contact](https://innohub.space/eng/mypmc/contact-center/) ### Our work - [Solutions](https://pmc-expert.com/sol/) - [Products](https://pmc-expert.com/products/) - [Services](https://pmc-expert.com/serv/) ### Resources - [Contact center](https://innohub.space/eng/mypmc/contact-center/) - [Support center](https://innohub.space/eng/mypmc/technical-support/) - [Legal center](https://innohub.space/eng/mypmc/legal-center/) - [Open source](https://github.com/pmc-community) ### Company - [PMC](https://pmc-expert.com/) - [About](https://pmc-expert.com/about/) © 2026[innohub.space](https://innohub.space)by [PMC](https://pmc-expert.com)  [TERMS](https://innohub.space/eng/terms-of-service/) | [PRIVACY](https://innohub.space/eng/privacy/) | [COOKIES](https://innohub.space/eng/cookie-policy/) Cookie Settings   [Powered by Atlas - a B2B SaaS HubSpot theme](https://www.kalungi.com/atlas-hubspot-theme-for-b2b-saas-software)