start portlet menu bar

HCLSoftware: Fueling the Digital+ Economy

Display portlet menu
end portlet menu bar
Select Page

Interact helps marketers to be competitive and allows the users to present the right offer to the proper recipients at the right place. Sometimes marketers need to present offers on a page where they may not have server-side programmatic control over the page display (as you would with, for example, PHP or another server-based scripting). We offer a simple solution to deal with this use case. Marketers can use Interact’s JSConnector, whereby users can embed JavaScript code in the page content that will be executed by the visitor’s web browser.

What is JSConnector?

JSConnector acts as a service that integrates JavaScript code on the client-side by calling the Interact Java API.
The Interact JSConnector provides a service on the Interact runtime server that allows JavaScript code to call the Interact Java™ API. This enables web pages to make calls to Interact for real-time offer personalization using only embedded JavaScript code, without having to rely on web development languages (such as Java, PHP, JSP, and so on). For example, you might embed a small snippet of JavaScript code on each page of your web site that serves offers recommended by Interact. Therefore, each time the page loads, calls are made to the Interact API to ensure that the best offers are displayed on the page for the visitor.

Where is it available:
JSConnector comes built-in as part of the Interact Runtime Web application (post Interact version 8.1).  It can also be deployed separately as its own web app, configurable to communicate with the remote Interact Runtime instance.

In addition to the web app, there is a configuration directory that will contain all the configuration files used to manage the behavior of the JSConnector.  For convenience purposes, the web app comes with a web page that will help administer most of the features available in these configuration files ( https://host:port/<interact>/jsp/WebConnector.jsp )

Inbuilt JS Connector :

If you are relying on the JSConnector service that is built in to the Interact, then the only thing that needs to be done is to set two Java properties at the start-up of the app server that will tell the system where the JSConnector root directory (that contains the conf data) resides on the file system.

-DUI_JSCONNECTOR_HOME=<jsconnectorHome> [For e.g. -DUI_JSCONNECTOR_HOME=E:\u101\Interact\jsconnector]


Demonstration with test data :

  1. Create an Interactive channel “IC_web” and mapped customer audience table
  2. Create a zone ‘Z1’ and an interaction point ‘IP1.’
  3. Create two events “present” as contact and “accept” as accept event
  4. Create a new session and add an interactive flowchart
  5. Add Interaction PB, decision PB (only one branch as all records) and Populate Seg PB (Segment name is “Allseg”)
  6. Go to the campaign setting and add offer attributes (AbsoluteLandingPageURL as a string, TREATMENT_CODE as a string, TextVersion as string and AbsoluteBannerURL as string)
  7. Create an offer template and all attributes
  8. Create a new offer


Configurations in JS Connector

A. Navigate to /jsconnector/conf directory, and edit jsconnector.xml file.


B. Copy the attached WebConnector_TestPage.html in the local directory.

Edit WebConnector_TestPage.html and set the correct URL for unicaWebConnectorBaseURL


C. Restart the application server.

D. Open the WebConnector URL

https://<interacr runtime host:port/interact/jsp/WebConnector.jsp

E. Click on Basic Settings (these settings should be picked up from jsconnector.xml, so no need to change anything here. Just make sure the URL and IC name are correct).


server-side programming control

F. Setting for Most Interaction Point (The HTML Element ID should be the name of the HTML file that we created for testing)

server-side programming control

G. Click on “Rollout the changes” and click on “Generate the finished configuration XML.”

server-side programming control

It should give a pop up as “Your configurations were saved successfully,” and jsconnector.xml should get updated.

H. Click on Enhanced Pages > Click on WebConnector_TestPage.

server-side programming control

I. Fill the information on Interaction Points (offer display locations) on this page or set of pages.

Here IP1 should be IP name picked up from jsconnector.xml and the name of the IP from your IC.

server-side programming control

J. Click on basic settings and Select events.

The three drop-downs should list the events from your IC. Again, these values are picked up from jsconnector.xml

server-side programming control

K. In HTML Display types, we are using Image_Banner_Link.flt

server-side programming control

L. Click on “Roll out the changes.”

Test for jsConnector

  1. We are using following jsconnector url


server-side programming control

  1. Click on the Reload Configuration link. It should display the message as “Configuration reload successful”.

server-side programming control

  1. Set URL: https://<interacthostName:PortNumber>/WebConnector_TestPage.html

Session Cookie name: SessionID

SessionId Value : 123

VisitorID : CustomerID

Visitorid value: 10001

  1. Click on Execute PageTag

server-side programming control

5. Click the OK button on the Popup.

6. The offer Image should be displayed. This is set in the field ‘ AbsoluteBannerURL’ while creating offers.

This is treated as Offer Contact.

server-side programming control

server-side programming control

  1. Click on the image. Users should navigate to the web page set in the field ‘ AbsoluteLandingPageURL.’

This is treated as offer Accept.

server-side programming control


The JSConnector is used to design web pages and capture customer responses on the page, which may not have server-side programmatic control over the page display. These responses [offer accept/reject/contact] from the customer are captured and inserted into the staging tables of interact. With the normal ETL process, this data gets transferred into the campaign history tables and then used for reporting and for the interact learning functionality.


Comment wrap
| May 2, 2023
Elevate Your Marketing Game: 5 Personalization Strategies to Deploy a Successful Campaign
Learn the secret sauce to impeccable timing and striking a chord with your audience in Part 3 of our series on personalization. Discover the art of pinpointing the ideal moment to implement personalized marketing and create meaningful connections with your customers. Tailor your messages and drive higher engagement, loyalty, and revenue.
Marketing & Commerce | November 16, 2022
Personalization Playback in Unica Interact
With the new playback feature, in Unica Interact marketers can review what happened in any time period. Drill down all the way to individual sessions to see activities by user attributes, session attributes, API history, event patterns status, and delivered and disqualified offers.