JavaScript SDK: Variables, Popups & Pre-Population

Social Intents offers two ways to embed the chat widget on your website. The Standard Embed is a single script tag. The Advanced Embed uses socialintents.load() and lets you pass visitor information and layout settings directly in code. Both approaches give you access to the SI_API JavaScript object for controlling the widget at runtime.

Standard Embed (1.4.js)

The standard embed code is a single script tag with your Widget ID in the URL hash. Copy this from your My Widget page in the Social Intents dashboard:

<script src="https://www.socialintents.com/api/chat/socialintents.1.4.js#YOUR_WIDGET_ID" async="async"></script>

This is the simplest way to add the chat widget. Once installed, you can use the SI_API methods described below to control the widget and pass visitor data.

Advanced Embed (1.5.js)

The advanced embed uses socialintents.load() to initialize the widget. This approach lets you pass visitor details, custom fields, layout settings, and routing options directly in the embed code. Copy this from your My Widget page by selecting the Advanced tab:

<script>
!function(){var e=window,i=document,t="socialintents",u=e[t]=e[t]||[];
if(u.t) return console.error("Duplicate Social Intents code snippet.");
u.t=!0;u.load=function(s){u.settings=s||{};var c=i.createElement("script");c.async=!0;
c.src="https://www.socialintents.com/api/chat/socialintents.1.5.js";i.getElementsByTagName("script")[0].parentNode.insertBefore(c,null);};
}();
socialintents.load({
    app_id: "YOUR_WIDGET_ID",
    alignment: "right",
    horizontal_padding: "25px",
    email: "",
    name: ""
});
</script>

Available Settings

The socialintents.load() settings object supports the following properties:

Full Example

<script>
!function(){var e=window,i=document,t="socialintents",u=e[t]=e[t]||[];
if(u.t) return console.error("Duplicate Social Intents code snippet.");
u.t=!0;u.load=function(s){u.settings=s||{};var c=i.createElement("script");c.async=!0;
c.src="https://www.socialintents.com/api/chat/socialintents.1.5.js";i.getElementsByTagName("script")[0].parentNode.insertBefore(c,null);};
}();
socialintents.load({
    app_id: "YOUR_WIDGET_ID",
    alignment: "right",
    horizontal_padding: "25px",
    name: "Jane Smith",
    email: "jane@example.com",
    phone: "555-0199",
    group: "Sales",
    question: "I need pricing info",
    custom1: "Enterprise",
    custom2: "CUST-12345",
    proactivemessage: "Questions about our products? We can help!"
});
</script>

If you provide all required pre-chat form fields (such as name and email), the pre-chat form is skipped and visitors go directly into the chat.

SI_API Methods

Both embed approaches expose a global SI_API object once the widget has loaded. Use onSIApiReady() to wait for it to be available, then call any of the methods below.

onSIApiReady

This callback fires when the widget has finished loading and the API is ready. Wrap all SI_API calls inside this function:

<script>
function onSIApiReady() {
    // API is ready - call SI_API methods here
    SI_API.showTab();
}
</script>

Widget Control

setChatInfo

Pre-fill visitor details after the widget has loaded. This is useful on member sites where user data is already known. Pass empty strings for any fields you want to skip:

<script>
function onSIApiReady() {
    SI_API.setChatInfo("Jane Smith", "jane@example.com", "555-0199", "Sales", "I need pricing info");
}
</script>

Parameters in order: name, email, phone, group, question.

addParams

Pass custom key-value parameters that appear in the chat transcript. Parameters are an array of objects, each with a name and value property:

<script>
function onSIApiReady() {
    var params = [];
    params.push({ name: "Plan", value: "Enterprise" });
    params.push({ name: "Customer ID", value: "CUST-12345" });
    params.push({ name: "Order Number", value: "ORD-1000" });

    SI_API.addParams(params);
}
</script>

Event Callbacks

React to chat events by setting callback functions on the SI_API object inside onSIApiReady():

<script>
function onSIApiReady() {
    SI_API.onChatOpened = function() {
        // Chat window was opened
    };
    SI_API.onChatClosed = function() {
        // Chat window was closed or minimized
    };
    SI_API.onChatEnded = function() {
        // Chat session ended
    };
}
</script>

Triggering Chat from a Custom Button

Open the chat widget when a visitor clicks a button on your page:

<button onclick="SI_API.showPopup();">Chat with us</button>

You can combine this with SI_API.hideTab() to hide the default chat button and only show your custom trigger.

Combining Both Approaches

If you are using the advanced embed, you can still use all SI_API methods. The onSIApiReady() callback works with both embed types:

<script>
!function(){var e=window,i=document,t="socialintents",u=e[t]=e[t]||[];
if(u.t) return console.error("Duplicate Social Intents code snippet.");
u.t=!0;u.load=function(s){u.settings=s||{};var c=i.createElement("script");c.async=!0;
c.src="https://www.socialintents.com/api/chat/socialintents.1.5.js";i.getElementsByTagName("script")[0].parentNode.insertBefore(c,null);};
}();
socialintents.load({
    app_id: "YOUR_WIDGET_ID",
    alignment: "right",
    horizontal_padding: "25px",
    name: "Jane Smith",
    email: "jane@example.com"
});

function onSIApiReady() {
    var params = [];
    params.push({ name: "Plan", value: "Enterprise" });
    SI_API.addParams(params);
}
</script>

Google Analytics Integration

Track chat events in GA4 by entering your GA4 Measurement ID and API Secret in the CSS & Javascript tab. See Google Analytics Event Tracking.

For the complete API reference, see the Developer API page.