Conversational Q&A FAQ agent

{"name": "Puffy Winter Jacket", "product_id": "7a45q835", "description": "This classic down-filled jacket provides maximum insulation combined with lightweight comfort.", "documents": ["https://storage.googleapis.com/my-storage/puffy-winter-jacket.pdf"]}
{"name": "Extra Puffy Winter Jacket", "product_id": "9b82c222", "description": "This classic down-filled jacket provides even more insulation combined with lightweight comfort.", "documents": ["https://storage.googleapis.com/my-storage/puffy-winter-jacket.pdf"]}

• All fields are required.
• Each product_id must be unique.
• JSONL lines are not separated by commas.
• Enter multiple PDF files as an array of strings.
• If a document doesn’t have an associated PDF file, a blank PDF file is accepted.

1. From the Agent Studio screen, select Agents and click + Create New.
   
2. Enter a descriptive Name for the agent, select Conversational Q&A FAQ, and then click Next.
   
3. From the Industry Domain list, select the industry that best matches your business.
   
4. In the Tasks field, select the AI model to execute for Q&A Generation. The recommended model for your industry is selected by default, but you can select a different model.
   
5. In the Tasks field, select the AI model to execute for Conversation Generation. The recommended model for your industry is selected by default, but you can select a different model. Click Next.
6. On the Select a data connector screen, click GCS Bucket and then click Next.
7. On the Configure GCS bucket to import data screen, fill out all required fields.
   
   • In the Name field, enter the name of your datasource as you want it to display in Lucidworks Platform.
   • In the Processing Region field, select the region for Lucidworks to process your data. This is not necessarily the region you created your GCS bucket in. The default value is us-southcarolina.
   • In the Bucket Name field, enter the name of your GCS bucket as it displays in GCS.
   • In the Service Account JSON Key field, enter your Google Cloud Platform (GCP) key in JSON format to allow access to your GCS bucket.
8. Click Verify Connection to verify the connection to the GCS bucket.
   You can add multiple GCS buckets to expand the information the model uses for responses. To add another bucket, click Add New on the Configure GCS bucket screen. To remove a bucket, select it and click Remove.
9. When the agent is created, choose what to do next:
   • Preview Agent opens the agent preview, where you enter a product ID and test the agent’s responses in Agent Studio before you add it to your site. See Preview and test the agent.
   • Get Agent Code displays the code snippets to add the agent to your website. See Embed the agent.
   You can also click Exit and do either later from the agent details. Verify the agent displays on the Agents screen.
   

1. Navigate to Agent Studio, click the Agents tab, and then select the agent you want to preview or test.
   
   The agent details display the following sections:
   • Agent Information, such as the name, type, and model for the agent.
   • Agent Preview, to test whether the responses accurately reflect the information on your website.
   • Agent Code, to embed the agent in your web page.
2. In the Agent Preview section, enter the ID of a product from your datasource. The agent loads using the data for that product. If the product ID isn’t found, check the ID and try again. What the preview displays depends on the agent type:
   • Product Q&A displays the questions and answers generated for the product. Select a question to view its answer.
   • Conversational Q&A opens a chat. Enter questions about the product, including follow-up questions.
   • Conversational Q&A FAQ opens a chat for your questions and displays generated questions a customer is likely to ask.
3. Test the agent’s responses and verify they accurately reflect the information about that product.

• Where you place the script that loads the agent.
• How the agent obtains the product ID so it provides accurate information.

​

Add the script

1. Navigate to Agent Studio, click Agents, and then click the agent you want to implement.
   
2. In the Agent Details section, scroll to the Agent Code section, and in the Add the Script Tag area, click Copy.
   
3. Paste the script into the <head> or <body> of your website’s HTML.

<head>
	<script type="module" id="lw-ui-lib" embed-token="YOUR_EMBED_TOKEN"
    	src="$PATH_TO/dist/springboard/springboard.esm.js">
	</script>
</head>

<body>
	<lw-template template-id="12345" product-id="1234">
	</lw-template>
</body>

<head>
</head>

<body>
	<script type="module" id="lw-ui-lib" embed-token="YOUR_EMBED_TOKEN"
    	src="$PATH_TO/dist/springboard/springboard.esm.js">
	</script>

	<lw-template template-id="12345" product-id="1234">
	</lw-template>
</body>

​

Specify the product ID

​

URL query parameter

1. Scroll to the Add Component Markup section, and then in the Automatic Extraction area, click Copy.
2. Paste the <lw-template> snippet in the <body> of every page where you want the agent to display.
3. In the Specify the Product ID section, enter the URL Query Parameters value for the product ID. For example, if your URL is https://www.example.com/sale?q=solvents&product=1234 and your product ID is 1234, enter product.
4. Verify the agent displays on the appropriate pages of your website.
5. Test the agent by entering various queries to determine if it returns appropriate responses.

​

CSS selector

1. Scroll to the Add Component Markup section, and then in the Automatic Extraction area, click Copy.
2. Paste the <lw-template> snippet in the <body> of every page where you want the agent to display.
3. In the Specify the Product ID section, enter the CSS Selector that contains the product ID. The following example uses .product .product-name @data-value to extract a product ID of 1234:
   <head>
   	<script type="module" id="lw-ui-lib" embed-token="YOUR_EMBED_TOKEN"
       	src="$PATH_TO/dist/springboard/springboard.esm.js">
   	</script>
   </head>
   
   <body>
   	<div class="product">
       	<div class="product-name" data-value="1234">
           	Product Name
       	</div>
   	</div>
   
   	<lw-template template-id="12345">
   	</lw-template>
   </body>
   
4. Verify the agent displays on the appropriate pages of your website.
5. Test the agent by entering various queries to determine if it returns appropriate responses.

​

Markup attribute

1. Scroll to the Add Component Markup section, and then in the Markup Attribute area, click Copy.
2. Paste the <lw-template> snippet in the <body> of every page where you want the agent to display. The following example uses https://www.example.com/sale/1234 and product-id in the snippet. If your product ID attribute name is different from the one in the copied snippet, change the attribute name manually.
   <head>
   	<script type="module" id="lw-ui-lib" embed-token="YOUR_EMBED_TOKEN"
       	src="$PATH_TO/dist/springboard/springboard.esm.js">
   	</script>
   </head>
   
   <body>
   	<lw-template template-id="12345" product-id="1234">
   	</lw-template>
   </body>
   
3. Verify the agent displays on the appropriate pages of your website.
4. Test the agent by entering various queries to determine if it returns appropriate responses.

​

Customize the layout with CSS

/* Custom styling for the agent template */
  .lw-template {
    /* Container dimensions */
    min-height: 300px;
    max-height: 800px;
    min-width: 300px;
    max-width: 600px;

    /* Optional styling examples: */
    --qna-font-family: Arial, sans-serif;
    --qna-container-border-radius: 10px;
    --qna-header-font-size: 32px;
    --qna-header-icon-color: #a19eff;
    --qna-answer-bubble-bg-color: #add8e6;
  }