Tip: How to create collapsibles with customer data using FactBranch

If you want to display a collapsible (an item that expands when clicked showing more info) in Zendesk, there now is a way! Here is how this will look:

As you can see this is part of the FactBranch app, that you can install in Zendesk Support, Sell and Chat. FactBranch loads customer data from your database, Google Sheet or REST API and displays it in the sidebar in Zendesk.

Step 1 - Setup FactBranch

First you need to create a FactBranch account and connect your data source. This could be a PostgreSQL, MySQL, SQL Server database, a Google Sheet or any REST API.

Step 2 - Adapt your Query

Make your query return a JSON object or array. This is a bit different in every SQL variant and so we wrote specific documentation on how to do this here:

• PostgreSQL
• MySQL
• Microsoft SQL Server

Step 3 - Add the Collapsible

In the FactBranch Designer set the type of the item containing the JSON-response to "HTML" and add the collapsible like this:

{% set preview = [
  'total',
  'summary',
  'status'
] -%}

{% set labels = [
  'order_id:Order ID',
  'total:Total',
  'status:Status',
  'item1:Item 1',
  'item2:Item 2',
  'item3:Item 3'
] -%}

<h3>Recent orders</h3>

{{ value|collapsible('order_id', preview, labels) }}

This is just an example so let’s walk through that code: First we define the list of fields to use in the preview. This is simply an array of strings. Use the field names from your SQL query.

Then we define the fields to show when an item is expanded. Also use the field names from your SQL query here. To define a custom label (because the raw field names aren’t that nice) use this syntax with a colon:

'field_name:Custom label to display'

If you need help …

… do reach out to support@factbranch.com. This is an advanced feature and we’re happy to help you set it up or hear what else you need.