Magnolia Answers <em>powered by ai12z</em>

Magnolia Documentation Team

Magnolia Answers powered by ai12z

Generative AI Magnolia Plus Magnolia 6.2, 6.3, 6.4

Magnolia Answers powered by ai12z, is an AI platform that adds search, chatbots, and digital assistants to Magnolia websites and portals. It enables users to get instant answers, navigate content, and complete tasks more efficiently.

Magnolia Answers uses generative AI to deliver relevant, context-aware responses, automate customer and internal workflows, and support multilingual experiences. Digital assistants (copilots) can guide users through onboarding, product selection, and other structured journeys.

Common use cases include embedding AI-powered search on Magnolia pages, assisting users during onboarding and decision-making, and delivering real-time, personalized recommendations.

This guide explains how to integrate ai12z with Magnolia. The integration uses webhooks to notify ai12z of content changes and a REST endpoint to retrieve content, ensuring the AI remains synchronized with Magnolia content.

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 Magnolia Answers search widget

You can integrate Magnolia Answers 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>