Adding in or changing the customer default information that is displayed on the right hand panel of your Groove inbox is easy with the widget API.

In addition to updating the Groove default fields, you can also pass through additional Custom Profile fields which you can access through the Custom Profile which is displayed on the right hand panel.

Note:

 

Custom profile fields
Groove supports a number of default fields out of the box, and you can add additional Custom Profile fields dynamically as your needs grow.

Default fields are displayed on your customer in Groove, while any Custom Profile fields you add can be displayed by modifying the template in your custom profile app settings.

Any Custom Profile fields you add can be either a string, number, object, or array.

// Default Groove default fields, displayed in the top right
email: <string (email_address)>
name: <string>
about: <string>
company: <string>
phone: <string>
location: <string>
website: <string>

// Custom Profile fields can be any name you define, they can only be accessed and displayed in the Custom Profile fields
custom_field1: <string | number | object | array>
custom_field2: <string | number | object | array>
...


Example

Let's say you want to enrich the customer with some additional information when they send you a message through the contact form.

In the example, we want to add in the users name when the message comes in. In addition, we will also capture their customerID & their products in a custom field which will display in the custom profile.

The email address is always required as the identifier for which customer to update. This can either be added in the script which will pre-populate the forms email address for the customer. If it is not added, we will use the one the customer adds in on the contact form. It's important to note, that if the customer changes the email address, this will take priority and be sent to Groove.

var myCustomData = {
    email: 'arthur.dent@example.org', // Required to identify the user
    name: 'James dean',
    //Custom Profile fields
    customer_id: '101920-1',
    customer_products: ['Sony tv', 'Google home mini']
};

groove.widget.setContact(myCustomData);

Because the widget API will queue commands if the widget has not fully loaded, you can call the setCustomer command at any time, as long as the script tag containing your embed has been evaluated. We will assume that the data is hard-coded in this example, but you could just as easily make an ajax request to populate the data.

Accessing your Custom Profile fields in your custom profile template

Using the example above, we can display the Custom Profile fields of the user's customer ID and the customers products in the custom profile section of sidebar by modifying the custom profile template:

<ul>
    <li>Customer ID: {{customer_id}}</li>
    <li>
        Products
        <ul>
            {% for item in customer_products %}
            <li>{{ item[1] }}</li>
            {% endfor %}
        </ul>
    </li>
</ul>


You must explicitly add the field to your template before it will appear in the profile, but you can start recording the data before you have modified your template.


Supporting older browsers

Our widget uses the Proxy object to provide a cleaner easier to understand api for our customers. If however you need to support older browsers, we suggest that you use the exec fallback method to interact with our api illustrated below.

// Open the widget
groove.widget.exec('open')

// Close the widget
groove.widget.exec('close')

// Toggle the widget's visibility
groove.widget.exec('toggle')

var myCustomData = {
    email: 'arthur.dent@example.org', // Required to identify the user
    name: 'James dean',
    //Custom Profile fields
    customer_id: '101920-1',
    customer_products: ['Sony tv', 'Google home mini']
};

groove.widget.exec('setContact', myCustomData)