5 Integrations in React: Contentful, Tilda, Hubspot, Typeform, Builder.io

Greetings, all! Have you ever been asked by your business to accelerate development by incorporating third-party services? And doesn’t the idea of being able to modify design and content on your own, without having to involve a developer, sound enticing? Currently, there are various tools available to facilitate effective collaboration among different team members, including developers, designers, and content managers. Tilda, Wordpress, and other similar solutions offer convenient means for working on different aspects of a project. However, integrating the outcomes of these tools into a React application can pose challenges. The optimal solution would be to enable interaction between our application and the content, allowing for event interception to achieve seamless integration and flexibility. In this article, I will demonstrate how to solve three integration-related tasks in a React application: Changing page content in React without involving a developer; Extending the functionality of the React application using third-party services; Creating pages with minimal development costs. These approaches will allow us to ensure flexibility and accessibility of our application while significantly speeding up the development process. Let’s take a closer look at each of these tasks and identify the optimal solutions. | Demo Code Conditions This article will showcase different integration techniques that can save time for developers and offer greater flexibility to designers and content managers. Typically, we expect the following from third-party solutions: The tool should be straightforward and easy to learn for all parties involved — how to implement and maintain it, manage its visual aspects, and handle content. Ease of adoption: While it may not be possible to create a one-size-fits-all solution for every case, the tool should fulfill its purpose and ideally offer possibilities for extending its functionality. Flexibility: We want to provide users with rich interactive pages. Is it possible to dynamically display different elements depending on the state of the React application, such as authentication, and invoke functions from the main application? Level of interaction: How simple and fast is the process of initial integration and subsequent deployments? Can this process be automated? Ease of integration: Some tools are specifically designed for integration, while others are not. How much effort will be required to display and interact with integrated content? Clarity of integration: In the examples, we will address the following questions: How to display the results of a tool’s work within our React application in a dedicated container? How to subscribe to events from React? What possibilities exist for Server Side Rendering? It is worth noting that I will provide examples of solutions using specific products, such as but there are analogs available that work in similar ways. This will allow us to examine different integration approaches and their practical applications visually. Tilda, Hubspot, Typeform, Contentful, , Builder.io Task: Changing content If our goal is only to offload data management to an admin interface while still wanting to create other components of the application “the old way” (by writing code and designing in an editor), then using a can be an optimal solution. This approach allows storing data in SaaS solutions, retrieving it through SDKs or directly, and then rendering it on the client-side using our own efforts. Headless CMS Examples of such programs are Strapi and . In this article, we will explore the integration approach using the latter. One of the main tasks of this approach is to solve the problem of hardcoding data into the markup. When business requirements change, you need to dive into the code and perform a deployment, which can take a lot of time. Contentful In the Headless CMS paradigm, we first set up the data model. For example, we can have a model called “Article” with fields like “Title” and “Article Text.” This stage can be done by developers. Then, content managers can create specific instances of entities based on this model, such as “Article 1,” “Article 2,” and so on. Next, we will look at examples of implementing this approach to demonstrate how Contentful can help solve the problem of data hardcoding and make the process of updating and modifying content more convenient and efficient for the team. Integration In the case of Contentful, we can retrieve data through the standard Web API using the function. After adding access keys, we need to make a request to the Contentful API and save the received data locally for further use: fetch const [page, setPage] = useState(null);

useEffect(() => { window .fetch( `https://graphql.contentful.com/content/v1/spaces/${process.env.REACT_APP_CONTENTFUL_SPACE}/`, { method: "POST", headers: { "Content-Type": "application/json", // Authenticate the request Authorization: `Bearer ${process.env.REACT_APP_CONTENTFUL_API_KEY}`, }, // send the GraphQL query body: JSON.stringify({ query }), } ) .then((response) => response.json()) .then(({ data, errors }) => { if (errors) { console.error(errors); }

// rerender the entire component with new data setPage(data.blogPostCollection.items[0]); }); }, []); After obtaining the data from Contentful and storing it locally, further handling of the data becomes familiar and convenient in React components. We can use the data in components just like any other data and render it on the page using JSX: return ( {page.title} {page.body.json.content.map((item) => ( {item.content[0].value}

))} ); Interaction with buttons and event handling in a React application using data from Contentful follows the familiar React pattern. We can easily add a button and pass an onClick handler to the component to respond to user actions. Server Side Rendering The process is smooth here as well. During server-side content rendering, we can make requests to Contentful and send the client pre-rendered data. If we are using Next.js, we can fetch data using (for Server Side Rendering) or (for Static Site Generation). This allows us to provide users with fast and optimized content based on data retrieved from Contentful. getServerSideProps getStaticProps Deploy In this aspect, everything works smoothly as well. Data is fetched every time there is a request, eliminating the need for redeploying the application. The only consideration is if you are using the Static Site Generation approach, you’ll need to utilize to observe changes in content. With webhooks, you’ll automatically receive notifications of any changes made in Contentful, allowing you to maintain up-to-date content on your website without manual intervention. webhooks Summary Pros: Content managers can update page content without involving developers, significantly saving the team’s time. Changes happen in real-time, which is critical when the application deployment takes considerable time, allowing instant content updates without reloading the entire application. Ability to address tasks related to meta tags for the page, such as title, description, keywords, and other metadata. Cons: When using a large number of fields in Contentful, it’s important to manage them and use meaningful names, especially if the page contains multiple headings and various data. Despite offloading content management to an admin interface, manual coding is still required for the layout. If the design changes, modifications will be needed in the application’s code. Additionally, if new variables or content blocks appear, they must be added to the codebase. For a more in-depth look at integrating React and Contentful, you can read the details . here In conclusion, the approach using Headless CMS, such as Contentful, provides efficient content management, saves developers’ time, and enables quick content updates on the website. However, it is essential to consider some drawbacks, such as managing multiple fields and the need for manual coding, which may require additional efforts and attention when adopting this approach. | Demo Code Task: Expansion of functionality When we have a service that can be displayed within an , and it does not have security headers like or , we can embed the content of this service on our website by displaying it inside an . Some services, such as Typeform, offer integration through and provide SDKs for easy integration. However, for websites without a ready-made SDK, if we want to add interactivity and interaction with the parent application, we need to use the mechanism. iframe x-frame-options: SAMEORIGIN Content-Security-Policy: frame-ancestors none iframe iframe postMessage Integration Let’s consider a situation where we already have an SDK for integrating another web resource into our React application. Using as an example, which provides an SDK for seamless integration, we’ll explore this approach. Typeform Typeform offers various display options on websites, such as a slider, popup, and more. The main thing we need to do is install the package and add the corresponding widget to the page: @typeform/embed-react { alert("onQuestionChanged"); }} /> To influence the content inside the Typeform, we can use the mechanism in Typeform. By passing data through hidden fields, we can interact with the form’s content and use it for additional processing and analysis. hidden fields If we need to respond to events occurring in Typeform, we can pass event handlers and to the , just like we do with regular React components. However, it's essential to note that there are some limitations when working with the Typeform SDK, and we cannot directly add custom components to the form. onSubmit onReady Widget Server Side Rendering We face limitations when using SSR, which makes it impossible to index content displayed through an . This limitation applies to any solution using this technology. iframe Please be aware that the lack of Server Side Rendering support may impact your website’s SEO, as content loaded through an is inaccessible to search engine crawlers and search engines. iframe Deploy As we retrieve up-to-date content in the every time there's a request, we are only responsible for displaying the tag. Content updates occur on the side of the third-party service, which allows us to automatically receive the latest information without any intervention on our part. This makes it easier to maintain the freshness of content on our website, as changes in the source are automatically reflected in the . iframe iframe Summary Pros: If a product supports integration, working through allows solving business tasks with just a few lines of code. iframe Content changes on the page are automatically reflected in the . iframe Cons: Does not work with SSR (Server Side Rendering). Not all solutions provide SDKs, which may require writing code wrappers. This can add complexity and increase development time. | Demo Code Task: Creating Pages Method 1: Using Iframe If we want to display a website inside an and interact with it from our React application, we'll need to use . It's essential to note that for this approach, we should have the ability to add custom HTML to the page, preferably within the . iframe postMessage The mechanism allows us to establish secure communication between the parent and embedded application. With , we can send messages and pass data between the parent and the embedded window, even if they are on different domains. postMessage iframe postMessage Integration We will add code to handle requests from the parent application and code to send events from the page. Since Hubspot does not provide an official SDK for integration, we have to use an alternative approach. Although this method is not official, it is one of the available options for interacting with Hubspot through an . Hubspot iframe From the React application, we will add a link to Hubspot within an and pass a , through which we'll interact with the service: iframe frameRef In the following code example, we have implemented the handling of links and individual buttons in Hubspot, which we defined in . This allows us to intercept and process events from the service's side. Additionally, we can add configuration to control the behavior of the Hubspot page, such as enabling or disabling specific functionalities: hubspotConfig const hubspotConfig = useMemo( () => ({ handlers: [ { type: "click-button", name: CTA_BUTTON_NAME, selector: "a[href='#custom']", }, ], }), [] ); Then, we will subscribe to the event from the inside a hook: message iframe useEffect useEffect(() => { const handler = (event) => { if (!event.origin.includes("hubspot") || !event.data.type) { // #1 return; }

switch (event.data.type) { case "click-button": { // #2 if ( event.data.payload.buttonName === "link" && event.data.payload.href ) { window.location.href = event.data.payload.href; break; }

alert(`Button: ${event.data.payload.buttonName}`); break; } case "load": { if (hubspotConfig && frameRef.current?.contentWindow) { frameRef.current.contentWindow.postMessage( createAction("set-config", { config: hubspotConfig }), // #3 "*" ); } break; } default: { console.log("There is not event type"); } } };

window.addEventListener("message", handler, false);

return () => { window.removeEventListener("message", handler); }; }, [...]) Some interesting points to note: It’s essential to filter events by checking the field, using the condition . This is crucial because the event can come from various and , and we need to process only those events originating from Hubspot. origin event.origin.includes("hubspot") message iframe workers When we receive an action with the type generated on the Hubspot side, we handle the click in React. This way, we can react to actions happening inside the and synchronize them with the React application. click-button iframe We send the action only after the has loaded (action type - details below). This allows us to inform Hubspot about which buttons we want to handle additionally. set-config iframe load In the Hubspot admin for the page, we add the following script to the section: head (function () { const createAction = (type, payload) => { return { type, payload, }; }; const sendMessage = (action) => { window.parent.postMessage(action, "*"); };

window.addEventListener("DOMContentLoaded", () => { // #1 window.addEventListener( // #2 "message", (event) => { if (event.data.type === "set-config") { // #4 const config = event.data.payload.config;

config.handlers?.forEach((handler) => { const element = document.querySelector(handler.selector);

switch (handler.type) { case "click-button": { element?.addEventListener("click", (e) => { e.preventDefault();

sendMessage( createAction("click-button", { buttonName: handler.name, }) ); }); break; } default: { // eslint-disable-next-line no-console console.log("There is not the event: " + handler.type); } } });

const links = document.querySelectorAll("a");

links.forEach((link) => { link.onclick = "event.preventDefault()";

link.addEventListener("click", (e) => { e.preventDefault();

sendMessage( createAction("click-button", { buttonName: "link", href: link.href, }) ); }); }); } }, false );

sendMessage( createAction("load", { // #3 title: document.title, description: document.querySelector('meta[name="description"]')?.content || "", }) ); }); })(); The sequence of actions is as follows: The is loaded, and the event is triggered. iframe DOMContentLoaded In the parent application (React), we subscribe to the event. message We send an with type to notify the React application that this script is ready to receive . Here, we can also pass metadata about the page to add them to the React application's section for SEO purposes. action load config Upon receiving the action, we iterate through all the links and buttons specified in the and add handlers to them. Now, when these elements are clicked, we send information about the event to the parent application (React). set-config config click This process allows for seamless communication and interaction between the embedded Hubspot page (inside the ) and the parent React application. It enables React to handle events triggered within the Hubspot page and to synchronize actions between the two environments effectively. iframe Server Side Rendering Using poses challenges with Server Side Rendering (SSR), and the content inside the cannot be indexed by search engines. iframe iframe The reason is that the content inside the is dynamically loaded on the client-side, not on the server. As a result, when a search engine crawls the page, it cannot see the content within the because it is not available in the HTML markup that is delivered from the server. iframe iframe This limitation can have a negative impact on SEO and affect content indexing, making the use of unsuitable for applications in terms of accessibility and search engine optimization. iframe Deploy Similar to the example with Typeform, in this case, it is also impossible to predict what may be loaded inside the , as the content can change. The content within the will always be up-to-date, and we need to interact with it based on the information received through and the shared . iframe iframe postMessage config However, it’s essential to note that you should update the “contract” between the parent React application and the in a timely manner. If there are changes inside the that can affect the message exchange or the usage of the shared , you need to ensure synchronization and appropriate updates in both applications. This guarantees the correct functioning of the integration and the preservation of up-to-date information. iframe iframe config Summary Pros: Ability to implement functionality of any complexity using both our React application and a third-party service. No need to involve developers to change the content of the page. Cons: Lack of SSR support, which can have a negative impact on SEO. Need to add a code wrapper for message exchange via . This approach may be challenging for individuals unfamiliar with this functionality and can cause difficulties during integration and debugging. postMessage The approach of using and has certain advantages and limitations, and the choice of this approach depends on the project's requirements and the experience of the developers who will be working with it. iframe postMessage | Demo Code Method 2: Export HTML/CSS/JS Sometimes, there are situations where we have a ready-made design exported from another website, and we want to integrate it into our React application. However, using or a proxy to interact with the third-party service is not suitable in this case. iframe If our site has or in the HTTP headers, it will be impossible to display it inside an . In such cases, we need to approach the task differently - by copying the markup, including all styles and scripts, and then attempt to insert it into our React application. x-frame-options: SAMEORIGIN|DENY Content-Security-Policy: frame-ancestors none iframe To demonstrate this method of integration, we will use the platform . This service allows us to export files that can be hosted on our own server. It is essential to note that officially modifying the exported content is prohibited, but in this example, we are doing it solely for educational purposes. Tilda Integration To begin, you need to download a zip archive from the settings of your Tilda website. After successfully exporting the files, you should move them to the appropriate directory for static resources. In this example, Tilda contains a considerable number of scripts, which can complicate the integration task, especially when dealing with images. The issue arises due to the use of “magic” function calls responsible for lazy loading images. Unfortunately, this approach is not compatible with React routing, as they assume initialization on page load rather than dynamic URL switching. This problem can be resolved by making slight changes to the scripts. It is also essential to replace all URLs for static assets (images, scripts, styles) from the Tilda domain to your own. Add links in to (js, css). For instance, becomes . index.html assets js/lazyload-1.3.min.js %PUBLIC_URL%/tilda/js/lazyload-1.3.min.js In the code, we need to place our content inside a string variable: html export const TILDA_HTML = ` ... ` And then insert it into the React component using : dangerouslySetInnerHTML return ( ); Interaction To add event handlers, we can use the standard DOM API: useEffect(() => { const tildaButton = document.getElementById("tilda-button");

const onClick = () => { alert("onClick tilda button"); };

tildaButton.addEventListener("click", onClick);

return () => { tildaButton.removeEventListener("click", onClick); }; }, []); Please ensure that you add appropriate ids or classes to the elements you want to interact with. Server Side Rendering Server-Side Rendering works well here. We render the content within our React component, which allows web crawlers to easily read and index the content on the page. html Deploy Every time design changes are made in the Tilda editor, manual intervention is required to go through the entire integration process. You need to download files, place them in the necessary directories, and update all the links. This complicates the automation of the process, which can be inconvenient with frequent changes. Summary Pros: Quick integration of ready-made landing pages into your React application. Estimated transfer time is about 2 hours of work. Cons: Lack of automation for the integration process, requires manual intervention. Unclear behavior of scripts, which can lead to various issues. Official restrictions on modifying exported content from such resources. Despite its simplicity, this approach is useful when you have limited time and need to quickly transfer a landing page from a builder to a React application. It allows for fast results, especially for urgent projects. However, in the long run, this approach may become challenging to maintain and scale. After transferring the landing page, any subsequent changes to its design or content may require reintegration, reducing the efficiency and flexibility of development. | Demo Code Method 3: React App Builder If we want to use React components in a familiar format, provide designers with the ability to work with them in a visual editor, and allow content managers to edit data separately from the design, we can consider website builders. There are many interesting solutions for designers and content managers, such as or . They offer powerful visual editors and content management systems (CMS) or allow data import from external sources. However, today, I will focus on Builder.io because this tool enables working with React components. Framer Webflow Integration Working with data and design is beyond the scope of this article. Let’s jump right into the code: const [content, setContent] = useState(null);

useEffect(() => { builder .get(MODEL_NAME, { userAttributes: { urlPath: "/builder", }, }) .promise() .then(setContent);

const clickHandler = () => { alert("Click button!"); };

document.addEventListener("click-button", clickHandler);

return () => { document.removeEventListener("click-button", clickHandler); }; }, []);

return ( ); To integrate this tool, we need to render the and pass the data we obtained from to it. That's all that is required from the developer for a successful integration. BuilderComponent builder.get Additionally, we register a event that will be triggered when a button is clicked. The event configuration is done in the Builder.io admin panel. This allows us to use the event for navigating to other pages or performing actions when the button is clicked. click-button Additionally, we have the ability to register custom components that will be available in the Builder.io admin panel. This allows us to create and use customized components that cater to the unique needs of our project: const CustomTicker = ({ title }) => { // ... return ( {title}: {count} ); };

Builder.registerComponent(CustomTicker, { name: "Custom Ticker", inputs: [{ name: "title", type: "text", defaultValue: "Ticks" }], }); Once we have registered a component, it can easily be added to the page from the left menu in Builder.io. This provides a convenient way to select and place custom components on the page for further editing and display in the React application. Interaction When working with custom components, we have access to all the functionality of our application. For example, we can interact with the Context API to manage state and pass data between components. Additionally, we can easily define our own handlers directly in the visual editor. This allows us to connect Headless CMS and use data in our scripts, providing greater flexibility and possibilities when developing and configuring components. Server Side Rendering SSR works excellently if we fetch data on the server. As a result, we create HTML that is almost indistinguishable from the “native” codebase. Developers can use the to successfully integrate Next.js and Builder.io, which offers additional possibilities and advantages when developing and optimizing our application. provided tutorials Deploy We obtain the content at the request stage, ensuring that the information is always up-to-date. There is no need to redeploy if we want to make changes to a page created with Builder.io. This provides a quick and convenient way to update content without the need for a full application restart. Summary Pros: Easy integration for React developers. We simply need to add the BuilderComponent to the page and register our custom components. Ability to import designs from Figma. However, there might be some nuances and adaptation of the designs for export is required. Increased development speed. By training designers and content managers on this tool, pages can be created without the need for developer intervention. Cons: The visual editor is not as powerful as other design tools for designers. Understanding CSS is required, as in some cases, CSS code needs to be written directly. Entry barrier. The presence of multiple abstractions may require a few days of learning the concept and understanding the authors’ intentions. Overall, this tool allows delegating some of the developer’s work to other team members. The main advantage lies in the clear division of responsibilities among team members and reducing interdependence. | Demo Code Comparison When summarizing the subjective conclusions regarding the task of “creating pages,” it’s important to base them on personal experiences with the integration. Understanding that these tools are initially intended for different purposes, there are still some overlaps in terms of their capabilities within a React application: Iframe(Hubspot), Export html(Tilda), Constructor(Builder.io) Event Handling: Iframe(Hubspot), Export html(Tilda), Constructor(Builder.io) Visual Editor: Iframe(Hubspot), Export html(Tilda), Constructor(Builder.io) Routing: Iframe(Hubspot), Constructor(Builder.io) Automation of Deployments: Iframe(Hubspot), Constructor(Builder.io) Separation of Data and Design: Export HTML(Tilda), Constructor(Builder.io) Content Indexing (SSR): Constructor(Builder.io) SDK: Constructor(Builder.io) Integration Documentation: Conclusion Undoubtedly, the choice of the tool depends on the specific task at hand. If your goal is to deliver content, a Headless CMS would be suitable. Using an SDK might be a viable solution if you need to add specific functionality, such as forms. The purpose of this article was to inspire experimentation with various approaches and encourage the pursuit of solving business challenges using the most suitable tools. | Demo Code Thank you! Best of luck in your experiments and development as well! If you have any more questions or need further assistance in the future, feel free to reach out. Happy experimenting!