This article helps you integrate personalized and unique functionality into your help center. It guides you through the process to add custom pages to your Knowledge Enterprise plan and explains how you can develop, bundle, and embed custom pages with React.js and Node.js.
For example, you can create a custom VIP Support signup page to provide a cohesive and tailored user experience.
This single-page app example uses React with TypeScript for the frontend and Node.js for the backend. Cascading Style Sheets (CSS) styles the app, and Nodemailer manages email confirmations for new users who successfully register.
Because you work with a React app, the example covers the Webpack steps to compile it into a single file. You embed the file in your help center theme and upload it. Follow the sections below for each set of steps:
If you don't want to integrate with a backend or use TypeScript, see the boilerplate to start your own single-page app.
Step 1: Develop the custom page with React, TypeScript, and Node.js
Custom pages let you develop with any preferred web technology stack. Many developers prefer React.js with Node.js for backend development. Each technology has its own nuances and specifications. Consider the following technical points:
React
Use Create React App for custom pages because this framework supports single-page applications. The VIP Support signup page makes two requests: one request generates a secure token for backend authentication, and the other submits actual data.
The example custom page changes user profiles and organizations within the system. If your page makes similar requests, validate data from the frontend before you send the request. Backend validation plays a crucial role, but frontend validation ensures clean data, especially from user inputs.
Remember that a custom page forms just one part of your help center. Ensure any functionality, branding, or styling aligns with your help center as a whole.
Consider these design aspects:
- Specify who can access this page, such as agents, all authenticated users, or every user
- Do not create a header or navigation on your custom page. The custom page inherits the header and navigation of the current theme. Position this page appropriately within the help center because the custom page exists outside the default help center schema. Users reach these pages through links in any help center template or predefined pages, such as your home page. Custom page URLs use the format
https://{domain_name}/hc[/{locale}]/p/{page_name}. - Select styling libraries that fit the help center theme. Ensure your font and color palette match your existing theme.
- Because you manually configure and bundle your custom page, local storage of images or assets doesn't work. Upload them to your help center theme before you embed them. For step-by-step instructions, see Using your own theme assets for help center.
Node.js
Custom pages give you a blank canvas to build a personalized experience for your visitors. With tools such as Node.js and Express, you can connect directly to existing systems and databases. You can also create new services with your preferred tech stack and integrate them with your help center for a seamless user experience.
The example app uses the functions below:
- The developers created an Express Application Programming Interface (API) that receives the user and organization information submitted by the frontend form
- The app sends API requests to Support to create and update the relevant user and organization with node-fetch
- It validates the form submission data with validator.js
- The app sends a confirmation email notification to the user on successful form submission with Nodemailer
Protect your API routes carefully when you build server-side custom page services. Use tools such as JSON Web Token (JWT) to secure your application to establish request authentication. For more details on JWT, see JSON Web Token Introduction.
The example app uses the authentication described below:
- The developers created an authentication endpoint that the frontend uses to request a JWT token and authorize requests to the form submission API
- The authentication modules generate and verify JWT tokens with jsonwebtoken
Depending on the application you build, consider your cross-origin resource sharing (CORS) policy. Ensure that the routes that receive requests from the client side have CORS activated. If you know the domains that send the requests, specify these domains explicitly. Otherwise, configure the wildcard *. For more information on CORS, see Cross-Origin Resource Sharing (CORS).
Step 2: Configure Webpack to bundle the custom page
After you complete the development of your custom page, bundle your React app with Webpack. Because your theme needs to embed all custom pages, compile the custom page into a single Hypertext Markup Language (HTML) file. The Create React App includes its own build and optimization tools. However, because you aim to return a single index.html file, the example uses its own webpack configuration to simplify this process.
Step 3: Embed and integrate the project into your theme and publish it to the help center
After you build your application, embed it into your help center. Navigate to the newly created build directory. You will find a few files needed to create the new custom page:
index.htmlstatic/css/bundle.min.cssstatic/bundle.min.js
The index.html file contains the code you put into the custom page. Access the JavaScript and CSS created for the project. First, upload the JavaScript and CSS files as assets into your help center. Then, copy the code from your index.html file into the custom page and adjust the file paths to point to the assets.
See an example below of how this appears in the code editor.
After you finish, publish your custom page. For additional resources about to manage content in your help center, see Knowledge resources.