This is a generic example of server-side rendering of Questions and Answers
Depending on your CMS or platform, the implementation will vary. Below is a generic example using JavaScript to fetch and render the questions server-side.
// ==== Example: Server-side JavaScript in a CMS Environment ====
// --- CMS utilities (dummy placeholders) ---
var httpClient = require('HttpClient'); // Generic HTTP client
var cmsUtils = require('CmsUtils'); // Generic CMS utility library
var URI = cmsUtils.getCurrentPageURI(); // Function to get the current page URI
URI = '^' + URI + '$'; // The ^ and $ ensure we only get questions for this exact page
// --- Configuration ---
var baseDomain = 'https://your-domain.example.com'; // Replace with your domain
var projectId = 'YOUR_PROJECT_ID'; // Replace with your project ID
var apiKey = 'YOUR_SECRET_KEY'; // Replace with your API key or secret
// --- Build the rek.ai prediction request URL ---
var predictionurl = 'https://predict.rek.ai/';
predictionurl += 'predict?p=' + projectID; // Add project ID
predictionurl += '&secret=' + secret; // Add secret key
predictionurl += '&entitytype=rekai-qna'; // Specify that we're fetching QnA-type predictions
predictionurl += '&subtree=' + encodeURIComponent(URI); // Limit predictions to the current page URI
predictionurl += '&unranked=true'; // Return predictions in same order every time
predictionurl += '&format=html'; // Request HTML response format
// --- Main function ---
function start() {
try {
// Configure request options
var requestOptions = {
dataType: 'text',
headers: {
'Accept': 'text/html',
'User-Agent': 'cms-backend-proxy',
'Origin': baseDomain
}
};
// Perform HTTP GET request
httpClient.get(apiUrl, requestOptions)
.done(function (responseBody, statusCode) {
try {
// Output the response (e.g., render HTML in CMS)
out.println(responseBody);
} catch (e) {
out.println('Error rendering response: ' + e);
}
})
.fail(function (errorMessage, status) {
out.println('Request failed: ' + status + ' - ' + errorMessage);
});
} catch (e) {
out.println('Unexpected error: ' + e);
}
}
// --- Run the script ---
start();In a front end script, you need to initialize the rek.ai question handling after the server-side rendering is done:
<script>
__rekai.ready(function() {
var options = {};
var questionOptions = window.__rekai.getQuestionsOptions();
questionOptions.serversideRendering = true;
window.__rekai.addCssStylesForQuestions(questionOptions);
window.__rekai.addEventListenersForQuestions(options, questionOptions);
});
</script>Add a header above the questions
To add a header above the questions, you can modify the server-side rendering code to include a header element before outputting the questions. For example, you can insert an <h2> tag before the questions are rendered:
predictionurl += '&headertext=' + encodeURIComponent(headertext);
predictionurl += '&headerid=' + encodeURIComponent(headerid);
predictionurl += '&headerfontclass=' + encodeURIComponent(headerfontclass);
predictionurl += '&headerheadinglevel=' + encodeURIComponent(headerheadinglevel);Cache
If it is possible to cache the server-side rendered output, it is recommended to do so to improve performance and reduce load on the rek.ai servers. The caching strategy will depend on your CMS or platform capabilities.