# Norkon's Live Center Power Up in Arc XP

Source: https://docs.arcxp.com/en/resources/norkon-s-live-center-power-up-in-arc-xp.html

Norkon’s Live Center Power Up is a real-time content tool that lets you deliver fast, engaging live experiences directly within Arc XP.

This guide explains how to install and configure the Live Center Power Up in Arc XP. Live Center by Norkon is a live content CMS designed to engage Millennial and Gen Z audiences through short-form, real-time content experiences that build loyal readership and drive subscriptions.

## Prerequisites

Before you begin, make sure you have:

- Access to your PageBuilder bundle repository.
- Familiarity with modifying Arc XP code and deploying to Arc XP environments.
- Completed the [Power Ups course](https://learning.arcxp.com/learn/lp/18/Power-Ups%2520%28Custom%2520Embeds%29) on Arc XP University.
- An active [Live Center account](https://livecenter.norkon.net/) and [Admin access](https://support.norkon.net/overview-users-admin).
- A valid [Live Center API key](https://support.norkon.net/integrations) for retrieving `latestChannels`

## Procedures

### Installing Norkon in Arc XP

Reference materials:

- [Arc XP Power Up (or custom embed) documentation](https://docs.arcxp.com/en/products/composer/getting-started-with-composer/getting-started-with-the-custom-embed-power-up-in-composer.html)
- [Arc XP guide to forking and ejecting components](https://dev.arcxp.com/themes/how-to-guides/ejecting-an-arc-block/)
- [Arc XP Theme blocks GitHub repository](https://github.com/WPMedia/arc-themes-blocks/tree/stable/blocks)

To install Norkon, follow these steps:

1. Unzip the package provided by Norkon. You find three folders:

  - `content sources`
  - `LiveCenterPowerUp`
  - `article-body` (used if you need to eject the Article Body Chain)
2. Copy the content sources into your Arc XP projects `content sources` directory.
3. Copy the LiveCenterPowerUp folder into your project at: `components/features/LiveCenterPowerUp`.
4. Configure the Article Body Chain:

  - If you have not ejected the Article Body Chain:

    1. Copy the `article-body` folder into your `components/chains` directory.
    2. Remove the corresponding block from `blocks.json`.
  - If you have ejected the Article Body Chain:

    1. Copy only the Live Center component inside `article-body/_children` into your existing `default.jsx`.
    2. Add the following custom embed logic:  
      ```
      case 'custom_embed':  switch (item.subtype) {    case 'Live Center':      return (        <LiveCenter key={`${type}_${index}_${key}`} embed={item.embed} />      );    default:      return null;  }
      ```
5. Add environment variables in your .env file or environment configuration:  
`LIVECENTER_TENANT_KEY=your-tenant-key`  
`LIVECENTER_API_KEY=your-api-key`
6. Bundle and deploy by running `npx fusion zip`.
7. Then upload the `.zip` bundle to your Arc XP environment.

### Setting up the Norkon Power Up in your environment

Repeat the following steps in each environment. Start with Sandbox, text, then repeat for Production.

1. Create a Power Up page in PageBuilder.

  1. Navigate to **PageBuilder > Pages**, then create a new page.
  2. Assign a name and URL.
  3. Inside the page, insert the block: `LiveCenterPowerup powerup`.
  4. Save, publish, and exit the page.
  5. Copy the page URL, as you need it in the next step.
2. Register the Power Up in Composer:

  1. Navigate to **Composer > Settings**.
  2. Click **Add custom embed**.
  3. Set both **Display Type** and **Custom Embed Name** to “Live Center”.
  4. For the URLs, use this pattern: `https://{YOUR_DOMAIN}/pf/{YOUR_PAGE_URI}/?_website={YOUR_WEBSITE}#SEARCH`
  5. Use the hash values based on context:

    - `#SEARCH` for the Search iFrame
    - `#EDIT` for the Edit iFrame
    - `#VIEW` for the View iFrame
  6. Choose an icon to identify the Power Up.
  7. Click **Update**, then **Save** in the top-right corner.

### Using the Norkon Power Up in Arc XP

After setup is complete, go to Composer to start using the Live Center Power Up. You can create new channels or use existing channels directly within your articles or live event coverage.

![norkon_live_center.png](https://docs.arcxp.com/images/learning-center/image/img-275df09f25debc54e9cf713c2c163bd9.png)