Each option can be a data- attribute on the script tag or a key in
init(options). Everything is text unless the table says otherwise. Only
the widget key and firm id are required.
The essentials#
| Data attribute | init() option |
Default | What it does |
|---|---|---|---|
data-integration-key |
integrationKey |
required | Your widget key (nwk_...). |
data-firm-id |
firmId |
required | Your portal's id for the adviser's firm. |
data-firm-name |
firmName |
none | The firm's name. Only used when the firm isn't set up yet and your portal offers trials. The new trial account is named after it. Without it, the adviser is told the portal needs updating. |
data-identity-token |
identityToken |
none | The signed identity pass your server created for this firm and adviser. Needed unless signed identity is switched off for your portal. |
The client (consumer)#
| Data attribute | init() option |
What it does |
|---|---|---|
data-consumer-first-name |
consumer.firstName |
Client's first name. Needed before a message can be written; the form asks if it's missing. |
data-consumer-last-name |
consumer.lastName |
Client's last name. The form asks if it's missing. |
data-consumer-email |
consumer.email |
Client's email. Needed to send by email; the form asks if it's missing and the firm can send email. |
data-consumer-phone |
consumer.phone |
Client's mobile. Needed for SMS and WhatsApp; the form asks if it's missing and the firm can use either. |
data-consumer-external-id |
consumer.externalId |
Your portal's id for the client. Stored with the message, and handed back to you in events. |
The adviser#
| Data attribute | init() option |
What it does |
|---|---|---|
data-advisor-name |
advisor.name |
Adviser's name. Needed (with the id) to accept the terms. |
data-advisor-id |
advisor.externalId |
Your portal's id for the adviser. Terms and account links are per adviser. Must match the signed pass when you send one. |
data-advisor-email |
advisor.email |
Lets Subcontext contact the adviser about the firm's account, for example to warn them before an unused trial is deleted. |
What the call was about#
| Data attribute | init() option |
Default | What it does |
|---|---|---|---|
data-draft-note |
draftNote |
none | A note from the call that your portal already holds. It replaces the reason and outcome menus. See Call note. |
data-subcontext |
subcontext |
none | Background for the assistant, such as previous quotes. In a data attribute, JSON text; in init(), any object, array or text. See Background for the assistant. |
Layout and look#
| Data attribute | init() option |
Default | What it does |
|---|---|---|---|
data-mode |
mode |
modal |
modal: a button that opens the form in a pop-up. docked: the form sits in your container, open from the start, with no button. Any other value means modal. |
data-container |
container |
none | A CSS selector for where to put the widget. In modal mode, the button appears there instead of floating in a corner. In docked mode, the form fills it. If nothing on the page matches, the widget goes at the end of the page. |
data-position |
position |
bottom-right |
Which corner the floating button sits in: bottom-right or bottom-left. Only for modal mode with no container. |
data-button-label |
buttonLabel |
Nurture with AI |
The button's text. |
data-primary-color |
primaryColor |
none | Your main brand colour (any CSS colour), for the headings, except in dark mode, where they stay in the light text. It is also the accent when the theme has no accentColor. |
data-button-color |
buttonColor |
the accent colour | Replaces the accent colour everywhere it appears: the button, main actions, selected options, links, focus outlines, the loading spinner and the edge of the call note. |
data-button-text-color |
buttonTextColor |
#F2EEE5 |
Text colour on accent-coloured areas. |
data-theme |
theme |
none | The theme object every Subcontext embed takes, or light or dark. In a data attribute, JSON text. See The theme object. |
The theme object#
theme takes the same object as the other Subcontext embeds, so one theme
can brand them all (see Theming the embeds). It can also
carry buttonColor and buttonTextColor.
| Key | What it changes |
|---|---|
accentColor |
The accent colour: the button, main actions, selected options, links, focus outlines, the loading spinner and the edge of the call note. Default #142E56. |
primaryColor |
Your main brand colour, as primaryColor above: the headings (not in dark mode), and the accent when there's no accentColor. Wins over the separate primaryColor. |
backgroundColor |
The background of the pop-up, or of the docked panel. Default white, or #1f1d1a in dark mode. |
fontFamily |
The widget's font. Load the font on your page yourself. Default: the system font. |
fontSize |
Size of the pop-up's main text, in pixels. Default 14. |
mode |
'dark' gives light text on a dark pop-up or panel, headings included. Without a primaryColor or accentColor, the buttons turn light with dark text. Not the same as mode above (modal or docked). |
The order of precedence is buttonColor and buttonTextColor (in the
theme, then as separate options), then the theme's shared keys, then the
separate primaryColor, then the defaults. For the accent, accentColor
comes before primaryColor.
data-theme='{"primaryColor":"#0F3D3E","accentColor":"#E07A5F","fontFamily":"Figtree, sans-serif","mode":"dark"}'Behaviour#
| Data attribute | init() option |
Default | What it does |
|---|---|---|---|
data-enabled |
enabled |
on | Off ("false" on the tag, false in JavaScript) reads the settings but draws nothing until you call enable(). |
data-debug |
debug |
off | On ("true" on the tag, true in JavaScript) adds detail to the browser console: the full reply of every failed call, problems shown to the adviser, and each event. See Troubleshooting. |
nonce |
nonce |
the tag's nonce |
Only for older browsers on pages with a content security policy. See Content security policy. |
| none | strings |
English | Your own wording for any text in the widget (JavaScript only). See Changing the text. |
| none | onReady, onDrafted, onSent, onRefused, onError |
none | Functions called at key moments (JavaScript only). See Events. |
Only the exact text false switches data-enabled off, and only the exact
text true switches data-debug on. In JavaScript, enabled is off only
for false, and debug is on only for true.
Merge fields#
Portals usually fill these values from templates. If a value comes through
empty, or as a template token that wasn't replaced, the widget treats it as
not provided. For example, an unreplaced {{Client.Mobile}} is never used as a
phone number. The form asks the adviser for it instead.
These token styles are recognised: {{...}}, {...}, [[...]],
[%...%], %%...%% and <<...>>. This applies to the key, firm id, firm
name, identity token, every client and adviser field, the call note, and
subcontext when it is text.
Changing the text#
Pass strings to init() to change any of the widget's wording. You only
need to include the ones you want to change. Words in {braces} are filled
in by the widget, so keep them.
SubcontextNurture.init({
integrationKey: 'YOUR_WIDGET_KEY',
firmId: 'YOUR_FIRM_ID',
strings: {
modalTitle: 'Follow up with {name}',
generate: 'Write the message',
sentTitle: 'Follow-up started'
}
})The reason and outcome menus can't be changed.