The Groove customer support widget is a small tab that can be easily installed on your site, giving your customers a simple way to search your knowledge base and/or contact you. 

Installing the Widget

To install the widget, log in to your Groove account and click Apps at the top of the page. Then locate the Support Widget app and click Install on the widget page.

Once installed, click the Settings button, then Create Widget at the top of the page. 

 (Note: If you already have the support widget installed, you will see an "upgrade" button in your settings.)

Customizing the Widget

You'll be taken through the setup steps to create and customize your widget. 

On the final step, you will be given a snippet of code and the option to either copy it or email it to a developer on your team. 

Adding the Widget to Your Site

To add the support widget to your website, insert your code snippet just above the </body> tag in your site's source code. After you've done that you will see the widget contact button added to every page of your website. 

---

Please Note: The customer support widget does not currently work in the Microsoft Edge browser. All other major browsers are supported. 

Version 2.0 of our support widget is currently in beta. It has a limited selection of customization options for the time being. 

Your widget settings can be accessed by logging into your Groove account, clicking Apps at the top of the page, and then Support Widget > Settings. 

Button Settings

You can choose the type (circle or rectangle) and placement (left or right) of your button with this setting.

Knowledge Base Settings

You can toggle on/off an option to add a contact button to the bottom of every article in your widget. 

Note: The KB tab in your widget will not appear when the widget is installed on your knowledge base, since your articles are already visible on that page.

Contact Tab Settings

With these settings you can select which mailbox to send your widget messages to and you can also toggle the option to recommend articles while the user is typing their subject line in the widget.

Color Settings

If you select "use custom color scheme" from the dropdown selection, you can customize the colors of your widget to match your own branding. 

Customizing Your Widget Text

You can customize all of the different bits of text in your support widget by simply clicking the text and then typing what you want it to say.

To customize the text of your contact tab, click over to "Contact" and click the text you want to edit. In the bottom right corner, you can switch between your form and confirmation message to edit the message your customers will see after they contact you.

Saving Your Changes

After making any changes to your widget settings, you'll want to make sure you publish them to your live widget using the Publish button in the top right of your settings. 

You have the option to integrate Olark Live Chat directly with your Customer Support Widget. In order to integrate Olark Live Chat with Groove, you must first have an Olark account. If you don't currently have an account with Olark and would like to incorporate Live Chat in Groove, you can set up an account here: Olark

Once you're all set up, you're ready to integrate Live Chat into Groove!

Step 1. Install the Olark Integration

In the Apps section of your Groove account, select the Olark integration and then click Install on the app page.

A settings modal will appear and you'll need to take the following steps to connect your Olark account to Groove.

Step 2. Add your Olark Site ID to your Groove Settings

Your Site ID can be found in your Olark Dashboard > Install Code. It's shown on the right side of the page.

Add this Site ID to your Groove app settings.

Step 3. Add Your Groove Webhook URL to Olark

Copy your Groove Webhook URL and click the link to open your settings in Olark.

Paste the URL into the Groove integration settings and click Save at the bottom of the page.

Step 4. Configuring Your Live Chat Integration

In your Groove integration settings in Olark, you can opt to send all transcripts and offline messages to your Groove account.

In your Olark app settings in Groove, you can select the mailbox you want your chat transcripts to send to using the dropdown menu in your Groove settings. 

If you are using multiple Customer Support Widgets, you can set up multiple Olark integrations using your different Site IDs. You can select the Site ID to use for each widget under the Contact tab options in your widget settings. 

All of your behavioral and advanced chat options will be accessible within your Olark settings. 

Chatting With Customers

Once your Groove account is integrated with Olark and your widget settings are configured, you can launch your Olark chat from your dashboard. 

When your chat is active, your customers will see a chat option at the bottom of your Customer Support Widget. 

After a chat is initiated, the customer will be prompted to enter a name and email address while being matched with an available agent. 

Then your live chat agents will respond from the Olark dashboard while the customer chats from your support widget. 

The Groove support widget is designed to be easily embedded into your website or application. For most uses, you can simply follow the instructions for installing your widget, and everything will work as intended.

For more advanced usage, you can modify the widget's embed code to change the behavior of the widget. This is a living document, and we will update it as we open up new functionality on the widget.

Command API

The groove object in your embed code manages a command queue that sends commands to the widget api. Using the groove.widget() method, you are able to communicate with the widget without actually worrying about it being fully loaded on the page. Normally, you will see this used to set up the widget id like so:

The widget() method takes the command as the first argument, and each additional argument is provided individually.

Here is a list of commands currently available to the command queue:

• groove.widget('setWidgetId', 'WIDGET ID')
  • Sets the initial widget id. This is required for the widget to load.
• groove.widget('setAutoload', false) (default: true)
  • Allows you to disable autoloading of the widget. This is useful for times when you need to manually load or unload the widget. For example, you may use Turbolinks in a Rails application and you only want to load the widget on certain pages. (If this is the case, check out our separate article on using the widget with Turbolinks).
• groove.widget('load')
  • Once you disable autoloading, this command will load the widget when you are ready.
• groove.widget('unload')
  • If you need to unload the widget, this command will reset everything back to the pre-autoloaded state.
• groove.widget('open')
  • Programmatically opens the widget, just as if the user clicked on the widget button at the bottom of the screen.
• groove.widget('close')
  • Programmatically closes the widget, just as if the user clicked on the close button inside the widget itself.
• groove.widget('setCustomer', {custom: 'attributes'...})
  • Read our documentation on setting custom data on a customer.

Before the widget is loaded, commands will be queued up as you add them. During initialization, the widget will process all of the commands in the queue first, and then it will immediately process any additional widget() calls.

Here is an example of using the command api to control loading and opening of the widget:

You can easily add profile data to a user who contacts you through your Groove widget. This is especially helpful when you already know who the customer is, or when you have some piece of information you want to remember about a customer. While there are a number of default fields that you can see when viewing a customer in Groove, you should you should enable the custom profile app in your account to get the most out of this feature. With this app installed, you can set additional profile data on your customers beyond our default fields, and you can display that additional data in the sidebar of your tickets.

Setting customer profile data in the widget is simple. If you aren't already familiar with the Groove widget API, you should take a quick look and familiarize yourself with the options available.

Example

Let's start with a simple example and assume we know the user's email address and some basic information. We want to make the data available on the customer when they send a ticket to us through the widget.

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.

By adding an email address, the value we set will be automatically populated in the email field of the widget's contact form. The customer can still modify this value, but it's a great way to save them some time if you already know who they are.

Any data you assign to the customer will be added to the customer matching the email address that is sent through the widget's form. If you set the email address, but you customer changes it on the form, Groove will use the address your customer selected.

Fields

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

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

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

Template

Using the example above, we can display the user's favorite number and travel gear in the sidebar by modifying the custom profile template:

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.

To customize the colors of your widget, go into your Apps > Support Widget > Settings in your Groove account. 

Under "General Settings" you will see a dropdown option to "use default color scheme" or "use custom color scheme." 

When you select custom, a color picker interfact will appear where you can change the colors of your widget to match your brand.

Just make sure you publish your changes when you're done!

For customers who need to support multiple brands in their Groove account, you can create multiple widgets and send the tickets to your different mailboxes. 

To create multiple widgets, first go into Apps > Support Widget > Settings and click the Create Widget button in the top right of the page.

When setting up your widget, under the Contact Tab settings, there is an option to select the mailbox where you want to send your tickets. 

If you have our old support widget installed and want to upgrade to the new one, you can do this in a few simple steps. 

1) In your Groove account, go into your Apps > Support Widget -- there you will see a big "Upgrade" button at the top of the page. 

2) After upgrading, you'll notice your settings page changes to show the new widget. Next you want to click the "Settings" button. 

3) You will see your existing widget listed in your settings and you can continue configuring it by clicking the gear icon on the right. 

If for some reason you don't see a widget already listed in your settings, you can create a new one using the button in the top right corner of the page and proceed to step 4. 

4) While customizing the look and feel your widget, you can toggle between the Knowledge Base and Contact tabs to adjust the settings for each piece of the widget. As you go, you will see your changes in a real time preview, so you know exactly what it’s going to look like when it’s live.

5) When you’re finished setting everything up, click the button to "Install On Your Site" and you will be given a new code snippet to use. Please note that this new snippet goes just before your </body> tag, rather than the </head> tag like the old widget. 

To install your customer support widget on a WordPress site, go into your WordPress dashboard and then click on Themes > Editor on the left side of the page. 

In the editor, locate the footer.php file in the list of files on the right side of the theme editor. 

In this file, paste the code snippet for your support widget just above the closing </body> tag at the bottom of the file. 

Then click Update File and the widget will be added to every page of your WordPress website. 

Turbolinks is a gem for adding single-page application performance to a standard Rails application, without resorting to a complex client-side framework to handle the loading of content.

If you intend to use our support widget on every page of your site, adding it to your app's layout is the easiest way to get up and running. Simply create your widget, copy the embed code, and paste it into the appropriate layout. You can follow the instructions here for more information.

However, if you only load the widget on certain pages, Turbolinks will attempt to reload the widget's embed code on the appropriate pages. Using the standard widget embed code will not work on some browsers. To properly support Turbolinks' hot-swapping of content, you need to make a few modifications to the widget's embed code.

First, take note of the widget id, as you will need to insert this in the new code.

Next, copy and paste this alternative code into the views you wish to load the widget on:

Finally replace the widget id placeholder INSERT YOUR WIDGET ID HERE with the original id you made note of earlier. If you forget to modify this id, your widget will not work.

With this modified embed code, Turbolinks will load and unload the Groove support widget as pages are hot-swapped in your application.

**Please note that this article is for our old customer support widget. See this article for instructions on customizing the new support widget and this article for more details on how to upgrade your widget.**

Appearances are important. We want every bit of Groove that makes a home on your site to look and feel like it matches your brand. That's why we've made the Support Widget fully customizable based on the look that's right for you. 

To customize your Support Widget, head to the Apps section in the top menu bar. In Apps, select Support Widget

Once you're in Support Widget, click Settings

 

In Settings, move on over to the Design tab. You'll be able to select the color for your Support Widget and Text, and if you're comfortable with code and want total control, we even have the option to add your own CSS for a truly personalized look and feel.