Passing user data to the chat

When a customer is signed in to your website, you already know who they are. With a few lines of code in your website's pages, you can pass this data to the chat. The instructions below are for whoever develops the website.

#What you get

• Complete contacts. Name, email and phone reach the contact card, in Contacts, linked to the conversation.
• Fewer questions for the customer. The chat's forms are already filled in with the data you pass. If the data covers every field, the chat asks for neither the contact form nor the live chat (the Operator Chat tab) form, which the visitor fills in when they ask to talk to a person from the team. The form of a Playground Form node still appears, already filled in: the customer checks it and sends it.
• Your own data. You can also pass data such as the customer code or the loyalty tier, in the workspace variables.

#How to pass the data

Before the widget code, add a script that creates the window.chatbotUserData object with the signed-in customer's data. The widget reads it when it starts.

HTML · the customer's data and the widget code (sample data)Copy

<script>
  window.chatbotUserData = {
    firstName: "Mario",
    lastName: "Rossi",
    email: "mario.rossi@esempio.it",
    phone: "+390212345678",
    company: "Officina Rossi",
    metadata: {
      customer_code: "C-1234"
    }
  };
</script>
<script defer id="supportfast-script" src="https://cdn.supportfast.ai/chatbot.js" data-chatbot-id="bot-a1b2c3d4e5"></script>

On real pages you don't type the values by hand: your website prints them, only when the customer is signed in. The examples for WordPress, Shopify and PrestaShop are further down.

#Accepted fields

• Write the field names exactly like this, with the same upper and lower case.
• Pass only the fields you have: none is required. Fields that aren't in the table aren't sent.

#Custom variables (metadata)

In metadata put the data that doesn't fit the standard fields, such as a customer code. Each key must match a workspace variable.

1. Create the variable

   In WorkspaceSettingsContacts, Variables panel, press Add variable. For example: Display name “Codice cliente” (customer code), Data type Text.

2. Use the identifier as the key

   In metadata, use the variable's Identifier (ID) for the AI as the key, for example customer_code. The widget also recognizes the Display name, but that can be changed in the console: from then on, the data would no longer arrive.

The value must match the variable's type:

How to use the variables afterwards is explained in Variables and automatic profiling.

#When the data is sent

The widget reads window.chatbotUserData when the page loads. The data reaches SupportFast when the customer writes: at the first message, or when they send a form or an attachment. Until they write, nothing appears in Contacts.

#If the data arrives after the page loads

On some websites the customer signs in without the page reloading, for example in single-page applications. In that case, pass the data with window.SupportFast.identify(). New data replaces the previous data; it isn't added to it.

JavaScript · after the customer signs in (sample data)Copy

// pass the data directly
window.SupportFast.identify({
  firstName: "Mario",
  email: "mario.rossi@esempio.it"
});

// or update window.chatbotUserData and have it read again
window.chatbotUserData = { firstName: "Mario", email: "mario.rossi@esempio.it" };
window.SupportFast.identify();

#Examples by platform

In the examples, the script runs only if the customer is signed in. Put it before the widget code, in the header of the pages.

#WordPress

The lines below go in one of these two places:

• at the end of the child theme's functions.php file, if the website has one;
• in a code snippets plugin, such as Code Snippets, if the website doesn't have a child theme. Create a new PHP snippet, paste the lines and choose to run it everywhere on the site.

Don't write them in the parent theme's functions.php: the next theme update would wipe them out.

PHP · the child theme's functions.php, or a snippetCopy

// SupportFast chat: the signed-in customer's data
add_action( 'wp_head', function () {
	if ( ! is_user_logged_in() ) {
		return;
	}
	$utente = wp_get_current_user();
	$dati   = array(
		'firstName' => $utente->user_firstname,
		'lastName'  => $utente->user_lastname,
		'email'     => $utente->user_email,
		// with WooCommerce you can add the billing phone:
		// 'phone' => get_user_meta( $utente->ID, 'billing_phone', true ),
	);
	echo '<script>window.chatbotUserData = ' . wp_json_encode( $dati, JSON_HEX_TAG | JSON_HEX_AMP ) . ';</script>' . "\n";
}, 1 );

#Shopify

In theme.liquid, before the widget code, paste these lines. If a piece of data is missing, for example the phone, the widget ignores it.

Liquid · theme.liquidCopy

{% if customer %}
<script>
  window.chatbotUserData = {
    firstName: {{ customer.first_name | json }},
    lastName: {{ customer.last_name | json }},
    email: {{ customer.email | json }},
    phone: {{ customer.phone | json }}
  };
</script>
{% endif %}

#PrestaShop

In PrestaShop 1.7 and 8 themes, add these lines at the end of the header file: in the Classic theme it's templates/_partials/head.tpl. Work on a child theme or a copy of the theme, so you don't lose the lines at the next update. If the widget isn't installed yet, paste its code in the same file, after these lines, as explained in HTML and other sites. Then clear the PrestaShop cache.

Smarty · templates/_partials/head.tplCopy

{if $customer.is_logged}
<script>
  window.chatbotUserData = {
    firstName: "{$customer.firstname|escape:'javascript' nofilter}",
    lastName: "{$customer.lastname|escape:'javascript' nofilter}",
    email: "{$customer.email|escape:'javascript' nofilter}"
  };
</script>
{/if}

#With the iframe

In a chat inside an iframe, window.chatbotUserData doesn't get through, because the chat is on another domain. The data is sent with a message between your page and the iframe.

1. Give the iframe an id

   Add an id attribute to the iframe copied from the console, for example id="chat-supportfast".

2. Add the script

   The script below waits for the chat to be ready and sends it the data, in the same fields as window.chatbotUserData.

HTML · iframe with the customer's data (sample data)Copy

<iframe id="chat-supportfast" src="https://app.supportfast.ai/chatbot-iframe/bot-a1b2c3d4e5" title="Chat" width="100%" height="600" style="border: 0" allow="microphone"></iframe>
<script>
  (function () {
    var frame = document.getElementById("chat-supportfast");
    var dati = {
      firstName: "Mario",
      lastName: "Rossi",
      email: "mario.rossi@esempio.it"
    };
    window.addEventListener("message", function (event) {
      if (event.source !== frame.contentWindow) return;
      if (event.data && event.data.type === "CHATBOT_READY") {
        // the data is sent only to the chat's address
        frame.contentWindow.postMessage(
          { type: "CHATBOT_USER_DATA", data: dati },
          new URL(frame.src).origin
        );
      }
    });
  })();
</script>

• Paste the script right after the iframe: it must run before the chat is ready, otherwise the CHATBOT_READY message is lost.
• For registered customers, fill the dati object as in the examples above.

These are the messages between the chat and the page:

#How to check

1. Sign in to the website as a customer

   Use a test account, in a private window.

2. Type a message in the chat

   Any message will do, for example “Hello”.

3. Open the contact

   In Contacts, open the contact card: the name, email and variables are the ones you passed.

#Privacy and security

• Pass only the signed-in customer's data, and only what support needs. Never passwords, payment data or health data.
• The data is in the page the website sends to that customer, in their browser. If the website uses a page cache (a cache plugin, the hosting cache or a CDN), make sure the pages of signed-in customers aren't cached: otherwise the page with one customer's data can reach another. Many cache plugins already exclude them by default.
• window.chatbotUserData can be read and changed from the browser of anyone who visits the website. For SupportFast it's declared data, not a verified identity: don't use it to grant access to confidential information.
• This data transfer must be stated in your privacy notice: see Privacy and security.

#Frequently asked questions

#See also