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.