DownloadsDocumentationAPI ReferenceChangelogOpen A TicketContact
Guides

SmartFAQs Widget Code Integration

Overview

Add the following snippet inside the tag of the page and configure it 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 SmartFAQs content will be displayed inside this div.

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

  • Set the value to the domain where the SmartFAQs requests will be sent.

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

  • Set value="true" to show an input field at the top where users can enter their queries.

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

  • Set the value to the collection number for SmartFAQs. Leave it empty to fetch data from all collections. Multiple collections can seperate by commas.

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

  • Set the number of SmartFAQs to display initially.

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

  • Set the maximum number of SmartFAQs to display.

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

  • Set value="true" to have SmartFAQs expanded initially.

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

  • Set value="true" to generate a JSON-LD script for each query, which allows the FAQs to appear as rich results in Google search.

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

  • This script includes all the JavaScript required for the widget to work. Make sure the src attribute points to the correct file path.

Sample code for widget integration

A basic example of integrating the SmartFAQs widget is shown below:

<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>

Updated about 1 month ago