Introduction

This guide shows you how to install and use the Airgentic Widget on a Squiz Matrix website.

The Airgentic widget has two modes:

  • A hover widget that appears on every page across the site
  • An optional Service Hub UI that appears on selected pages only

You’ll use a reusable Component Template to inject the necessary script and configuration. One instance is added to your global layout to activate the hover widget site-wide. Editors can then place the Service Hub wherever needed by inserting the component on specific pages and ticking a checkbox. No metadata fields or head edits are required.

1. Prerequisites

  • Matrix DXP version – Component Templates arrived in Matrix 6 and back-ported to late 5.5. You must be running Squiz Matrix DXP in the cloud to use this component. If you can see “Component Templates” in the asset tree you’re good.
    • create assets under Design & Layout → Component Templates
    • edit the site’s Design or Paint Layout
    • edit page contents
  • Airgentic IDs – have your Account ID and Service ID handy.

2. Install the component template

Option A – Import from URL

  1. Go to /_admin (Admin Mode).
  2. In the asset tree, right-click Design & Layout → Component Templates → New Child → Component Template.
  3. In the Details screen, choose Import manifest from URL, and copy/paste this URL:
  4. Unlock & Commit; the template appears with a green “Notice” status.
  5. Under Allowed Root Nodes, pick the site root so editors can see it, then change status to Live.

Option B – Upload the JSON file

Use the same steps as above, but download the Airgentic component.

And then choose Upload manifest file and browse to airgentic_component.json. The asset now behaves like any other template — you can rename, move, or clone it.

3. Add the hover widget globally

We need exactly one script tag site-wide, so we’ll nest a single instance of the component into your design.

  1. Create a hidden Standard Page called “Airgentic Global Widget” anywhere outside navigation.
  2. Edit Contents → + to Add Component → choose Code (or any type).
  3. Click the gear icon, find Template, pick Airgentic Widget (v1.2), fill in Account ID & Service ID, leave the checkbox unticked, Save.
  4. Make the page Live.
  5. Open your site Design or a global Paint Layout. At the bottom of the <body> (just before </body> is safest) add a Nest Content Design Area that points to the component asset ID of the code block you just made.

    Example parse-file snippet:

    <MySource_AREA id_name="airgentic_global" design_area="nest_content"> <MySource_SET name="assetid" value="12345" /> </MySource_AREA>
  6. Save & commit the design. Publish a page and view source—you should see:

    <script id="airgentic-script" … async></script>

    on every page.

4. Add the Service Hub to selected pages

  1. Open any page in Edit Contents.
  2. Press + (Add Component), pick Code (or a suitable component type).
  3. In Properties, select Airgentic Widget (v1.2), fill (or paste) the same Account/Service IDs, tick “Insert <div id='airgentic'>”, Save.
  4. Drag the component up or down in the components list to control where the div lands. Matrix writes components to the DOM in that order.
  5. Publish. The full chat window now appears exactly where you placed the div.

5. Choosing the display position

  • Inline:  the simplest: put the component where you want the chat to render; Airgentic reads the div’s coordinates.
  • CSS override: leave the component near the end of the page and use a style rule like

    #airgentic {position:fixed; bottom:2rem; right:2rem;}

    if you want a floating launcher.

6. If you can’t see things…

  • No “Component Templates” folder – you’re on an older Matrix or lack admin rights; ask a System Administrator.
  • Template doesn’t appear in the dropdown – check the template is Live and that the current page sits under an Allowed Root Node.
  • “+” button missing on Edit Contents – you likely don’t have Write permission for the asset or locks aren’t acquired.
  • Design parse file locked – need global design permission or a dev ops user to commit.