ArcXP PowerUp

We support embedding Tickaroo liveblogs into your ArcXP CMS using a custom powerup. The following document will provide documentation for how to install and use this so-called PowerUp.

Download

You can download the current version of the PowerUp from our public GitHub repository.

Installation

Please follow these steps to install the PowerUp into your ArcXP installation:

1. Donwload and extract the .zip-file containing the necessary files
2. Copy the “TickarooLiveblogPowerUp” folder (and its contents) from components/features to your components/features folder
3. Copy the “tickaroo-liveblog.js” file from content/sources to your content/sources folder
4. Open environment/index.json and copy the configuration from there to your active environment (most likely environment/index.json in your installation). You will need to enter your own client_id and themeIds there, as well as select whether to use SEO prefetch. See more under “Configuration”.
5. If you have not already done that, eject the article-body-block (see the ArcXP documentation).
6. Copy “TickarooLiveblog.jsx” from components/chains/article-body/_children into the _children folder of the ejected article body chain.

7. Add the custom embed into the default.jsx of the ejected article body chain like this (compare to components/chains/article-body/default.jsx from the downloaded PowerUp):

      switch (type) {
          case 'custom_embed':
              switch (item.subtype) {
                  case 'Tickaroo Liveblog':
                      return <TickarooLiveblog key={`${type}_${index}_${key}`} embed={item.embed} />;
                  default:
                      return null;
              }
   

   Merge the snippet into your own ejected chain — don't replace the file wholesale. The article-body chain relies on the imports and constant below at the top of the file. If your ejected default.jsx is missing any of them, add them (compare against components/chains/article-body/default.jsx from the downloaded PowerUp).

    import { useFusionContext } from 'fusion:context';
    import { isServerSide } from 'fusion:environment';
    import { LazyLoad, usePhrases } from '@wpmedia/arc-themes-components';
   
    const BLOCK_CLASS_NAME = 'b-article-body';
   

8. Copy powerup.jsx from components/output-types to your components/output-types folder (or verify that a powerup output type already exists). ArcXP renders PowerUp blocks in an iframe using the powerup output type — without it the liveblog block cannot render.

9. Bundle your installation (run npx fusion zip) and deploy it (PageBuilder Editor > Developer Tools > Deployer).

Set-Up

Now, all the necessary data is uploaded to your running ArcXP configuration. Please follow the provided steps to set up the PowerUp for your usage in the CMS:

1. In the PagerBuilder Editor under Pages, create a new page to host the PowerUp. Make sure to note down the URI. The following steps will use tickaroo-liveblog as the URI.
2. Open the newly created page. Under Curate > Blocks add the TickarooLiveblogPowerUp powerup. Share and publish the changes.

3. Switch to Composer. Under Settings > Content elements click “Add custom embed”. Create a new custom embed using the following configuration:

   

   Be careful to insert your own domain and website name. Replace tickaroo-liveblog with whatever URI you chose in step 1. The Custom embed name and Display type need to be the same!

Usage

Now that the PowerUp is finally set up, you can add it to your stories!

1. Open a story you want to add a liveblog to. Click “Add content” and select the “Tickaroo Liveblog” content.
2. A configuration form opens now. Paste the ID of your liveblog (see “Configuration”) into the form and select a theme. Click submit.
3. A preview is now visible in the CMS. In the draft preview (and the finished, published story) the whole liveblog is visible!

(You might need to make sure that the new article-body-chain is used in the relevant templates.)

Configuration

You will need to set a view options in the environment file and the content configuration. Here will be a short explanation on where to find and and what they mean.

• TIK_CLIENT_ID ID of the API Client to use. Can be found in Pro settings.
• TIK_USE_SEO Boolean indicating whether to use SEO prefetch.
• TIK_THEMES.id ID of the theme to use. Create themes in pro (Settings -> Widgets) to preconfigure display options and colors.
• TIK_THEMES.name The name of the theme that will be displayed during content configuration.
• liveblogId ID of the Liveblog to Embed. Can be found in Pro.

Where to find these values in Tickaroo Pro

Client ID (TIK_CLIENT_ID) — open Pro → Settings → Integration. The Client ID is shown as a badge in the top right of the page.

Theme ID and Name (TIK_THEMES.id / TIK_THEMES.name) — in Pro → Settings → Integration open Themes → Edit themes. Each theme shows its Theme ID as a badge; the theme name is the one you set here and the one you reference in TIK_THEMES.name.

Liveblog ID (liveblogId) — open the liveblog in Pro and copy its ID from here. Reporters paste this ID into the content configuration form (see “Usage”).

SEO prefetch will cause the ArcXP system to fetch HTML code from the Tickaroo backend and insert it into the webpage before delivering it to the user. This can improve load times and optimizes search engine visibility. More information can be found here.

Troubleshooting

403 — Permission required

If the liveblog fails to load and you see an error like:

Check if you have the necessary rights for this liveblog and if you used the correct client_id and id (embed_id)

the request was rejected with a 403 by the Tickaroo backend. Common causes:

• Wrong TIK_CLIENT_ID — the client_id in your environment file doesn’t match the API Client that owns the liveblog. Verify it under Pro → Settings → Integration (see “Configuration”).
• Wrong liveblog ID — the id (embed_id) passed for the block points to a liveblog the client can’t access, or has a typo. Copy it again from Pro (see “Configuration”).
• Request origin not in your Enabled domains — the domain the story is served from isn’t allow-listed, so the embed refuses to run. See the Enabled domains note above and add the serving domain under Settings → Integration → Enabled domains.