SmartFAQs Widget Code Integration

Overview

The following snippet needs to be added to the tag of the page and configured as required.

<div id="smartFAQsRoot"></div>

<input type="hidden" id="sb_plugin_domain" value="" />
<input type="hidden" id="smartfaqs_input" value="false" />
<input type="hidden" id="smartfaqs_col" value="" />
<input type="hidden" id="smartfaqs_count" value="5" />
<input type="hidden" id="smartfaqs_expanded" value="false" />
<input type="hidden" id="smartfaqs_limit" value="10" />
<input type="hidden" id="smartfaqs_generateJSONData" value="false" />

<script src="./build.js"></script>

Snippet Documentation

Root Element
<div id="smartFAQsRoot"></div>

  • All of the markup related to the generated smartFAQs gets rendered within this div element.

Domain
<input type="hidden" id="sb_plugin_domain" value="" />

  • Set the value attribute of this field to the domain to which the smartFAQs requests are made.

Input Field
<input type="hidden" id="smartfaqs_input" value="false" />

  • Set the value attribute of this field to true if you want to include an input field at the top of the widget so that SmartFAQs can be generated for any user-entered query.

Collection
<input type="hidden" id="smartfaqs_col" value="" />

  • Set the value attribute of this field to the collection number from which the SmartFAQs need to be displayed. If empty, SmartFAQs are fetched from all collections available in the instance. Multiple collections can be specified by separating each by a comma.

Initial display count
<input type="hidden" id="smartfaqs_count" value="5" />

  • Set the value attribute of this field to specify the number of SmartFAQs to be shown initially.

Total display count
<input type="hidden" id="smartfaqs_limit" value="" />

  • Set the value attribute of this field to limit the total number of SmartFAQs to be shown.

Expanded
<input type="hidden" id="smartfaqs_expanded" value="false" />

  • Set the value attribute of this field to “true” if the SmartFAQs need to be expanded intially.

JSON-LD structured data
<input type="hidden" id="smartfaqs_generateJSONData" value="false" />

  • Set the value attribute of this field to “true” if you want to generate a script tag with structured data JSON-LD format in the head tag for each query. This is useful for the FAQs to show up as rich results in the search results on Google.

Script
<script src="./build.js"></script>

  • This script bundle contains all of the JavaScript code required for the widget to function. Specify the correct path to the file in the src attribute.

Sample code for widget integration

A very basic integration of the SmartFAQs widget code would look like the following code:

<html lang="en"> 
<head>
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>SmartFAQs Results</title>

<link rel="shortcut icon" href="./favicon.ico" type="icon/ico"> 
<link rel="shortcut icon" href="./favicon.png" type="icon/png"> 
</head>

<body>
<noscript>You need to enable JavaScript to run this app.</noscript> 

<div id="smartFAQsRoot"></div> 

<input type="hidden" id="sb_plugin_domain” value="https://smartfaqs.searchblox.com" /> 
<input type="hidden" id="smartfaqs_col" value="17" /> 
<input type="hidden" id="smartfaqs_count" value="5" /> 
<input type="hidden" id="smartfaqs_expanded" value="false" />
<input type="hidden" id="smartfaqs_limit" value="15" />
<input type="hidden" id="smartfaqs_generateJSONData" value="true" />
 
<script src="./build.js"></script> 
</body> 
</html>