ArcXP PowerUp

In this article we cover the installation and usage of Live Center Power Up for Arc XP.

Prerequisites

You have access to your Themes repository.
You are comfortable making code changes on Arc XP features and deploying new versions to Arc XP environments.
Take the Power-Ups Arc XP University Course
You have an active Live Center account and Admin user
You have an active Live Center API key for retrieving latestChannels

Installation

Useful resources:

In the .zip file provided by Norkon, you find three folders: one for the content sources, one for the Power Up, and one for the ejection of the Article Body Chain

Copy the content sources to your ArcXP content sources folder
Copy the LiveCenterPowerUp folder to your project's components/features folder
Follow the instructions regarding for whether you ejected the Article Body Chain:
1. If you don't have the Article Body Chain ejected, copy the article-body folder and place it inside your components/chains folder. You must delete this block from the blocks.json
2. If you already ejected the Article Body Chain, copy only the Live Center component inside the article-body/_children and paste it in your default.jsx. You must add this component as a custom embed in you article body default.jsx like this:
```
case 'custom_embed':

   switch (item.subtype) {

     case 'Live Center':

       return (

         <LiveCenter key={`${type}_${index}_${key}`} embed={item.embed} />

       );

     default:

       return null;
```
Add the following variables to your environment LIVECENTER_TENANT_KEY and LIVECENTER_API_KEY with their respective values taken from the Live Center Dashboard (Live Center Support)
Run npx fusion zip and upload the bundle to your Arc XP environment.

Setup

You must make the following changes for each environment. We recommend doing them at least on Sandbox first, testing, and then performing the same steps on Production.

After the bundle is deployed and live, you must setup the Power Up before using it.

First, create a Page in PageBuilder to host the Powerup. To do so, navigate to PageBuilder, then Pages, and create a new page. Use the name you want and set a URL you like. Copy this URL to use later.

Inside the page, insert the block called “LiveCenterPowerup powerup”, Save and Publish, and then exit.

Next, add the new Power Up. Go to Composer, and click Settings. Click Add custom embed, fill "Display Type" and "Custom embed name" with " Live Center".

For the URLs, use the following example:
https://{YOUR_DOMAIN}/pf/{YOUR_PAGE_URI}/?_website={YOUR_WEBSITE}#SEARCH

Remember that your domain depends on the environment you configured the plugin in. If you don’t know the domain URL for the environment, check the Delivery tile >Site Settings and then view the site you’re configuring.

In this example, you can see that it ends in #SEARCH. This is for the first input (Search iFrame). Use #EDIT and #VIEW for the others.

Finally, choose the icon you want to identify the Power Up.

Click Update to close the modal, and don't forget to click Save at the top right corner.

Usage

Now you can go to the Composer and use the Power Up you just added. You can now create new channels or use existing ones.