Give clients the ability to update their information in Clio

Without leaving Clio, you can send clients Afterpattern apps that allow them to update their information. This requires two Afterpattern apps: 

App 1: Sends your client an email with a link to App 2

App 2: An online questionnaire that allows the client to update their own information.

‍

What it looks like in practice

From Clio, using the "More actions" dropdown, you can trigger an Afterpattern app:

This app will immediately send the client an email (using the email address associated with the client in Clio). In the body of that email, they'll find a link to another Afterpattern app:

This second app is designed to function like an online form. You have lots of options for branding your apps, and you can even pre-populate the question fields with whatever data you currently have for the client in Clio (this allows the client to skip through whatever they don't need to update):

Ultimately, this allows you to sit back and watch as your Clio data is updated directly by the client. Or, you can always use app 2 (the online questionnaire) to update the data yourself.

‍

How it works

This is a relatively involved process, but this article includes everything you need to get it done in 15 minutes. Unfortunately, you can't test these particular kinds of apps for free, you will have to sign up for a paid Afterpattern subscription. The good news is you get a free 2 week trial to your subscription.

‍

Step 1. Build the app that sends your client an email

This is app 1 of 2. It's sole purpose is to send an email to your client. This is the app you trigger from the Clio dashboard under the "More actions" dropdown.

This app just needs two page blocks: (1) a final page that just notifies you that the email was sent, and (2) a background page immediately before it that does the actual emailing:

Don't worry about using Clio Contact or Matter variables yet (as we are in the example above). Just add the above two blocks and create an email template (and lastly have this email fired from your background page). The email template will eventually include a link to app 2 (like in the image below), but don't worry about that yet:

1.1: Add Clio as a data source to this app, and then add this app to the Clio dashboard

You add a data source to your app under the "Data Sources" tab. Add a Clio Contact or Matter data source depending on whether you just want the client to update their Contact data (add Contact data source) or both their Contact and Matter data (add Matter data source). Then select what specific data you want to pull in by clicking "Select data":

From here, just click "Sync custom fields" and "Add all fields":

Great! Your app is now aware of all your Clio Contact and/or Matter data.

Next we want to add this app to your Clio dashboard so that it's available under the "More actions" dropdown. There are two reasons why we do this: (1) it makes it really easy to run this app; and (2) this is how the app knows whose data to use, because again as a result of your data source the app is aware of all your Clio Contacts and Matters -- by adding your app to the Clio dashboard, and then by navigating within Clio to a particular matter or contact, and then running the app from there, that's how your telling the app whose data you want to use.

To add your app to the Clio dashboard, just go to Settings > Global Configuration and click the toggle for either Contacts or Matters:

1.2: Use the email address variable for this contact

As a result of adding Clio as a data source to your app, and then adding the app to the Clio dashboard, you have available to you in your app a variable for each piece of data in Clio. Use the variable representing the client's email address on the background page that fires your email template: 

OK, now it's time to create the link that you'll use in the body of the email of this app. To do that, we need to build and activate app 2 of 2, the online questionnaire the client will use to update their information.

Step 2: Build the online questionnaire app the client uses to update their information

Start a new app (app 2 of 2). This will serve as the questionnaire the client uses to update their information.

2.1: Add Clio as a data source

I'm designing my app to use Clio contact data, so I'm adding Clio - Contacts as a data source:

Like in app 1, make sure to "select data", sync custom fields, and add all fields.

This time, we're not going to add the app to the Clio dashboard. This means we need another method of "looking up" a specific record within the Clio data source. The trick to making this app 2 work is recognizing that we want to use the same Clio record that we're using in app 1. We can accomplish this by having app 1 pass into app 2 the Clio record ID. To do that, we need to use a URL variable.

2.2: Create a URL variable

A URL variable is a variable that is defined (i.e. given a value) via the app's URL. Later, we're going to have app 1 create a URL to app 2 that passes in the Clio record ID.

To create a URL variable, navigate to Settings > Global Configuration:

Make sure that you create a number-type variable.

I'm naming my URL variable "URL_clio_contact_id" because ultimately that is the value we're going to pass in from app 1 (the Clio contact ID).

2.3: Use your new URL variable to "look up" a specific record in your Clio data source

There are many methods for "looking up" a specific record in your data source. Here, we're going to use the index method. This simply requires an Expression Block configured like this:

Well done! You now have variables in your app for each piece of data in the Clio data source. You can use these variables as normal, including writing personalized greetings on the page blocks of your app:

You can also pre-populate the questions in this app with data from Clio (this allows your client to skip past those questions that don't want to update). Learn more about giving questions default values.

2.4 Send data to Clio to update the client's information

In app 2, add a send data function (best practice is to add this to a background page). Use this send data function to update the client's Contact or Matter in Clio:

After you select the type of action you want to take (update a Contact or Matter), you must edit the webhook to specify what data you want to send to Clio (the technical name for a send data function is "webhook"). To edit the webhook, click "edit webhook":

This next step is critical: in order to update the correct Contact or Matter record (i.e. the record that belongs to the client you emailed in app 1), you must select the ID of the Contact or Matter in the webhook:

Once again, we're going to use the URL variable we created at step 2.2. above: URL_clio_contact_id.

2.5 Activate app 2 and copy the shareable link

Activate app 2 (learn how to activate an app). I am activating my app with a discoverability setting of "private" (this is adds an extra step later, but ensures my app won't be used by anyone except for the client I am emailing it to): 

Once app 2 is activated, you can copy its shareable link to your clipboard by navigating out of the app builder and clicking "copy shareable link":

Great! We're almost done. Next, we're going back inside app 1 to create the URL that will pass a value into app 2's URL variable.

Step 3: Create a URL to pass a value into app 2's URL variable

Back inside app 1, create a URL block (this is a type of logic block). The purpose of this URL block is to create a URL to app 2 (i.e. a link to app 2) and, more importantly, to include in this URL some values that are passed into app 2 when the client clicks on this URL. The URL you're creating is represented as a variable. I'm naming this variable "link to app 2".

In your URL block, paste the shareable link to app 2:

If you activated app 2 with a discoverability setting of "private", we'll want to remove the access key from the shareable link you just pasted into the URL block. This is a 2 step process: 

1. Copy and delete the access key parameter from the URL. This includes everything after "?access_key=xxxx":

2. Use an expression block to create a variable that is equal to the access key (just the access key, i.e. the long string of numbers after "?access_key="). I named this variable "access key":

3.1 Add params to the URL in your URL block

Again, the purpose of your URL block is to create a URL to app 2 (i.e. a link to app 2) and, more importantly, to include in this URL some values that are passed into app 2 when the client clicks on this URL. Values are passed into app 2 by adding params (short for "parameters") to the URL. You must add at least 1 param to your URL; if you activated app 2 with a discoverability setting of "private" you will end up adding 2 params, like this:

What are these params? 

• URL_clio_contact_id: This is equal to the variable "clio_contact_id" (if you're updating the client's Contact record; use "clio_matter_id" if you're updating the client's Matter record). IMPORTANT: Give this param the exact same name as the URL variable you created in app 2 at step 2.2.
• access_key: This is equal to the variable "access key" you created at step 3 above.

Terrific! You now have a URL to app 2 that passes values into app 2.

3.2: Use your new URL in the email to the client

Still working in app 1, return to the email template we started at step 1:

Your email template is currently a work-in-progress and is missing a link to app 2. We're going to add that now:

However, we can't use a normal link -- We have to build a custom HTML link so that we can use a variable as the link target. Don't worry, this is easy. To create an HTML link (also known as an "a tag"), start with this:

Next, delete the placeholder "VARIABLE GOES HERE" text and in its place insert the URL variable we made at step 3.1: 

🎉 All done

You have come a long way!

This FAQ covers all the unique technical aspects of building these apps. It does not include all the details you'll likely add (e.g. questions for the client to respond to, the informative or decorative pages you build, etc).

Make sure both apps are active before doing a live test. Please reach out if you need any help.