ai12z AI chatbot

Generative AI

ai12z is a sophisticated AI platform created to transform customer interactions and internal processes through advanced search functions, chatbots, and digital assistants, called copilots. By harnessing generative AI, ai12z delivers tailored responses, automates customer workflows, and supports multiple languages.

This guide offers a detailed explanation of how to integrate ai12z with Magnolia. The integration enables smooth content update notifications via webhooks and content retrieval through a REST endpoint, ensuring ai12z stays up-to-date with all content changes from Magnolia.

Prerequisites

You must have an ai12z account with a project ID.
You must have Magnolia with a DX Core license.

Integration

To integrate Magnolia with ai12z, you must:

Configure a webhook
Set up a REST endpoint
Add the ai12z search widget

Configure a webhook

Webhooks notify ai12z if content changes are published from Magnolia. You need a webhook if you are not regularly crawling your site. The example below shows you the important parts of configuration needed to create a webhook in Magnolia.

url: https://integrate.ai12z.com/api/connector/projectId (1)
method: POST
headers:
 "Content-Type": "application/json"
 "X-API-Key": "apiKey" (2)
enabled: true
events:
 - name: goLive
   eventType: Published
 - name: outdated
   eventType: Unpublished

1	Get your Project Id in your ai12z project settings.
2	Get your API key in your project’s API Keys section.

Set up a REST endpoint

If you do not crawl the page regularly, but instead choose to transmit the content from Magnolia, you have to set up a Magnolia REST endpoint. The configuration below is for example purposes. Your endpoint will deliver different node types based on your requirements.

 class: info.magnolia.rest.delivery.jcr.v2.JcrDeliveryEndpointDefinition
 workspace: website
 rootPath: /
 depth: 100
 limit: 100
 includeSystemProperties: false
 bypassWorkspaceAcls: true
 personalized: true
 nodeTypes:
   - mgnl:page
   - mgnl:area
   - mgnl:category
   - mgnl:folder
   - mgnl:contentNode
   - mgnl:content
   - mgnl:component
   - mgnl:template
 childNodeTypes:
   - mgnl:page
   - mgnl:component
   - mgnl:category
   - mgnl:folder
   - mgnl:contentNode
   - mgnl:content
   - mgnl:area
   - mgnl:template
 systemProperties:
   - mgnl:template
   - mgnl:component
   - mgnl:area
 references:
   - name: tourReference
     propertyName: tours  # This should match the property that holds references to tours
     nodeTypes:
       - mgnl:content
       - mgnl:page
       - mgnl:category
       - mgnl:contentNode
     referenceResolver:
       class: info.magnolia.rest.reference.jcr.JcrReferenceResolverDefinition
       targetWorkspace: tours
       expand: true
       generateLink: true
   - name: tourTypeReference
     propertyName: tourTypes  # This should match the property that holds references to tour types
     nodeTypes:
       - mgnl:category
       - mgnl:folder
       - mgnl:contentNode
       - mgnl:content
       - mgnl:page
       - mgnl:component
       - mgnl:area
       - mgnl:template
     referenceResolver:
       class: info.magnolia.rest.reference.jcr.JcrReferenceResolverDefinition
       targetWorkspace: category
       expand: true
       generateLink: true

Add the ai12z search widget

You can integrate ai12z on the frontend with ai12z’s REST endpoints. Alternatively you can use ai12z’s web component.

Add the required script to the <head> of your HTML.

<script type="module" src="https://unpkg.com/ai12z@latest/dist/esm/library.js" ></script>

Add the <ai12z-cta> tag to include the search component in your HTML. This tag supports customization through several attributes and slots.

<html>
 <head>
   <script type="module" src="https://unpkg.com/ai12z@latest/dist/esm/library.js"></script>
 </head>
 <body>
   <div>
     <ai12z-cta data-key="AI12Z_API_KEY"></ai12z-cta>
   </div>
   <!-- Style customization example, place after the `ai12z-cta tag to overide the style -->
   <style>
     .sc-ai12z-cta .custom-button {
       border: 1px solid #000;
     }
   </style>
 </body>
</html>