Content integration tutorial

Uniform enables you to build custom integrations that provide Uniform access to any content source with an available API. This allows you to extend Uniform's no-code data mapping and edge caching capabilities to any content source you like.

If you've determined that you do, in fact, need a custom integration, this tutorial will guide you through the process of building one.

making content from a REST endpoint available to Uniform.

About the integration#

This tutorial guides you through the process of building a custom integration for a WordPress site. The reason for building a custom integration is you want to provide a more tailored experience for people using the integration than the HTTP Request data type offers.

A custom integration consists of the following components:

Component	Description
Web application	Provides the UI for configuring the integration and the logic to interact with the data source. In this case, the data source is a WordPress site. During this tutorial, the application will run on localhost:9000.
Manifest	Tells Uniform how to incorporate the integration into the Uniform UI. The manifest is written using JSON. This manifest should not be confused with the Uniform Context manifest, which is used for visitor classification and testing.
Open a terminal and run the following command: npx @uniformdev/cli@latest new-integration CopyCopied!	When asked for a team to add the custom integration to, select your team. About this step A custom integration must be registered in your Uniform team. This can be done manually, but the new-integration command does it automatically.	When asked for the name of your integration, enter the following value: WordPress Site Integration CopyCopied!	When asked for the project you want to add the integration to, select your project. About this step A custom integration can be added to any project in your Uniform team. This can be done manually, but the new-integration command does it automatically.	When the command is finished, a Next.js application will be running on port 9000. About this step The new-integration command creates a Next.js application for you, but you can use any technology you want to build the web application.
Create the following file: .env UNIFORM_API_KEY= UNIFORM_TEAM_ID= UNIFORM_PROJECT_ID= CopyCopied!	Set the following values in the file: Variable name Value UNIFORM_API_KEY A Uniform API key with the Team Admin setting enabled. UNIFORM_TEAM_ID The Uniform team ID where the custom integration is defined. UNIFORM_PROJECT_ID The Uniform project ID where the custom integration is installed. In Uniform, open the project you added the custom integration to. Navigate to Settings > Integrations. In the section ADDED INTEGRATIONS find the integration WordPress Site Integration. Click Configure. By default, the settings page shows documentation. About this step The manifest tells Uniform which URL to load. In this case, it is a page in the Next.js application that is running on port 9000. In the source code for the Next.js application, create the following file: pages/integration-settings.tsx import { Callout, Link } from '@uniformdev/design-system' import type { NextPage } from 'next' const Settings: NextPage = () => { const link = ( <Link text="WordPress REST API" external={true} href="https://developer.wordpress.org/rest-api/reference" /> ) return ( <div> <p> This integration allows business users to use content from WordPress sites in content and components in Uniform. As long as your WordPress site supports the {link}, you can use it. </p> <Callout type="success">The WordPress Site integration has been installed successfully.</Callout> </div> ) } export default Settings CopyCopied! About this step This page uses components from the Uniform Design System to achieve a UI that is consistent with the rest of Uniform. Open the file mesh-manifest.json. Replace the contents of the file with the following: mesh-manifest.json { "type": "wordpress-site-integration", "displayName": "WordPress Site Integration", "baseLocationUrl": "http://localhost:9000", "locations": { "settings": { "url": "/integration-settings" } } } CopyCopied! Open a terminal in the root of the app. Run the following command: npm run register-to-team CopyCopied! About this step This pushes the changes in the manifest file to Uniform.