Demo application

Two days ago I suddenly posted React Tips, but this is in the form of an introduction to the base we are using to create this sample.

• About Vite
• Using React Router

A sample of the base is also available in codesandbox.

The operation is to add the ID of the profile to the back of the iframe and display it. So, for example, a CRM could keep this ID and use it when invoking in an iframe to display the profile information.

Sample code

Sample code based on the above program is available in the following repositories.

• https://github.com/haramizu/sitecore-cdp-profile-viewer

It is quite simple to use, and the following steps are required to get it working.

• Copy the .env.example file to create the .env file
• Set the following values in the .env file
• VITE_CDP_URL: Provide the URL of the CDP administration page (up to the domain name, no trailing /)
• VITE_BASE_URL: Retrieved from https://doc.sitecore.com/cdp/en/developers/api/base-url.html according to the data center you are using
• VITE_CLIENT_KEY: Obtain Client Key from API Access in Administration
• VITE_API_TOKEN: Obtain an API Token from API Access on the Administration page.
• Run npm install
• Run npm run dev to make sure it works locally

Check of code

Let's check it out by looking at the sample code. First, let's look at the App.tsx file, which is described as follows.

const App: React.FC = () => {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/guests/:guestRef" element={<Guests />} />
        <Route path="/orders/:guestRef" element={<Orders />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </Router>
  );
};

In practice, the movement will be as follows

• / works with Home.tsx
• /guests/:guestRef works with Guest.tsx passing guestRef as a parameter
• /orders/:guestRef works with Order.tsx passing guestRef as a parameter
• Other pages display error messages with NotFound

Now let's look at the code for each file.

Home (Home.tsx)

As for src/routes/Home.tsx, you may not normally need it. If you are doing system integration, this is to create the key to be embedded in the CRM to display the profile information. Since this is a sample, it will just be created so that if you put a key in the text input box, the page will be displayed using that key.

Guests page (Guests.tsx)

The file src/routes/Guests.tsx is designed to retrieve data from CDP and display Json data using the key entered at home. If the key has no corresponding value, an error is displayed.

As for data acquisition, axios is used to display the data.

Type definitions are set in src/interfaces/Guests/index.ts in order to handle Json data in TypeScript.

If there is a related order, a link to the order page is displayed so that it can be viewed.

Order page (Orders.tsx)

The src/routes/Orders.tsx page is designed to display the number of orders if the user is tied to an order. It does not display the details of the order.

Type definitions for handling order information are created in the src/interfaces/Orders/index.ts file.

Summary

For this sample code, we adopted Tailwind.css and NextUI. This is provided only as a sample, and it is necessary to maintain and operate the environment in which the application runs using Content Security Policy.

Tags

• Customer Data Platform