Server-side in Sitevision

There are two ways to set up server-side rendering of Questions & Answers in Sitevision.
We recommend using the Sitevision module, it requires no coding and is the quickest way to get started.

Option 1- Use the Sitevision module (recommended)

The easiest way to get started is to install the Rek.ai Questions & Answers module directly from the Sitevision Marketplace. No coding required.

Prefer a visual walkthrough? Follow our step-by-step interactive demo: Module installation guide →

Option 2- Set it up manually with code

If you prefer to implement server-side rendering yourself or need more control over the setup, you can use the code-based approach below. If you have questions or need help along the way, feel free to reach out at support@rek.ai.

1. Add a Script Module to your template

Add a Script Module in the template where you want the Questions to appear. In the JavaScript section, add the following code. Make sure to replace YOUR DOMAIN HERE, your project ID, and your secret key with your own values from the Rek.ai Dashboard (opens in a new tab).

// =======================================
// SiteVision → rek.ai QnA Prediction Integration
// =======================================
 
// --- Required modules ---
var requester = require('Requester'); // Used for making HTTP requests (GET/POST) for plain text or HTML
var utils = require('Utils'); // SiteVision utility module
var portletContextUtil = require('PortletContextUtil');
var pu = require('PropertyUtil'); // Utility for reading properties from nodes
 
// --- Site & Page Setup ---
var origin = 'YOUR DOMAIN HERE'; // Replace with your site domain (used in request headers)
var currentPage = portletContextUtil.currentPage; // The page this portlet is running on
var URI = pu.getString(currentPage, 'URI', ''); // Get the URI property of the current page (fallback to empty string)
URI = '^' + URI + '$'; // The ^ and $ ensure we only get questions for this exact page
 
// --- rek.ai Configuration ---
var projectID = '12341333'; // Your rek.ai project ID
var secret = 'ABCDEF'; // Your rek.ai secret key for authentication
 
// --- 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 execution function
// =======================================
function start() {
    try {
        // --- Setup request options ---
        var reqOptions = {
            dataType: 'text', // Expect plain text or HTML response
            headers: {
                'accept': 'text/html',              // Ask server for HTML
                'user-agent': 'sitevision-backend-proxy', // Identify request origin
                'origin': origin                    // Pass origin for CORS validation
            }
        };
 
        // --- Make GET request to rek.ai ---
        requester.get(predictionurl, reqOptions)
            .done(function (body, statusCode) {
                // ✅ Successfully received response
                try {
                    out.println(body); // Output the HTML returned from rek.ai directly to the portlet
                } catch (e) {
                    // Silent catch if printing fails
                }
            })
            .fail(function (message, status) {
                // Request failed
                out.println('rek.ai view failed: ' + status + ' - ' + message);
            });
 
    } catch (e) {
        // Catch any unexpected runtime errors
        out.println('rek.ai catch e: ' + e);
    }
}
 
// --- Run the integration ---
start();

2. Add the Velocity code

In the Velocity section of the same Script Module, add the following:

<script>
  svDocReady(function() {
      __rekai.ready(function() {
          var options = {};
          var questionOptions = window.__rekai.getQuestionsOptions();
          questionOptions.serversideRendering = true;
 
          window.__rekai.addCssStylesForQuestions(questionOptions);
          window.__rekai.addEventListenersForQuestions(options, questionOptions);
      });
    });
</script>

Extra features

Add a header above the questions

If you want to display a heading above the questions, you can add the following parameters to the prediction URL in the JavaScript code:

predictionurl += '&headertext=' + encodeURIComponent(headertext);
predictionurl += '&headerid=' + encodeURIComponent(headerid);
predictionurl += '&headerfontclass=' + encodeURIComponent(headerfontclass);
predictionurl += '&headerheadinglevel=' + encodeURIComponent(headerheadinglevel);

Set cache on the Script Module

To avoid calling the Rek.ai API on every single page load, you can set a cache time on the Script Module — for example 5 minutes. The questions will still update regularly, but the page will load faster.

Generic example Dashboard