Streaming live at 10am (PST)

Using Zapier with Multi-Ref fields - it's possible! #nocode

So if you’ve ever tried to use Zapier with Multi-Ref fields in the Webflow CMS, you’ll know just how frustrating it can be. You’ll generally get an error message and it’s game over.

A while ago I was working on a project for a client, and I ran into this issue myself. I am a #nocode designer, so whipping up some custom code to hook into the API wasn’t an option for me. It was Zapier or bust.

The Problem
I’m not sure if this is Webflow or Zapier’s ‘fault’, but the central problem is the Webflow ID. This is a unique 24 character string that is the ‘fingerprint’ for each CMS item. This is critical to the Multi-Ref field, as this is what Webflow refers to when assigning Multi-Ref items. The Webflow ID is (to my knowledge) impossible to access using Zapier. This means Multi-Ref = game over.

A Solution
So turns out you can jerry-rig this together to work, using a product called Integromat. This is a direct competitor to Zapier, but is far more powerful. Think of Zapier as Mac OSX (great UI and perfect for 90% of use cases, but limited when you want to stray beyond), whereas Integromat is Windows (not as intuitive, but a focus on endless powerful functionality). The way my solution works is to start and end with Zapier, but use Integromat to do a little heavy lifting in the middle. Here’s how it works.

Some Context
The project I was working on is a platform for the film industry, powered by Webflow for UI & CMS and the wonderful MemberStack for logins, memberships and hidden content. I wanted to enable users to ‘favourite’ or ‘shortlist’ a bunch of CMS items (in this case actors), which would then appear in a separate ‘Favourited Items’ page. This would be achieved by adding a Multi-Ref to each Actor CMS item, where each User that has favourited them would appear.

So as an example, User ABC is browsing the list of Actors. They click on a button next to Actor XYZ, which submits a form asking Zapier/Integromat to add a ‘User ABC’ into the Multi-Ref field on ‘Actor XYZ’s’ CMS item in the Webflow backend.

The Flow
So before you even get to Zapier, you need to do some gardening with Integromat. Our goal is to make the Webflow ID visible, and the way we’re going to do that is by creating a new Plain Text field in the CMS for both User & Actor. I call this Text Field ‘User Webflow ID’ and ‘Actor Webflow ID’, as this makes it easier to spot the difference later on.

We’re going to use Integromat to automatically fill this field with the Webflow ID.

  1. Create an Integromat account if you don’t have one.
  2. Create a new Scenario.
  3. Create a new Module, search and choose Webflow. It will ask you to connect your Webflow account, do this.
  4. Now click the canvas to create a new module. Choose Webflow as the app, and choose ‘List Items’ as the action.
  5. Fill out all the fields to point it to the correct CMS collection, in this case ‘Actors’.
  6. Click OK, and then right click on the module and select ‘Run This Module Only’.

If everything works, then it will drag out all of the content in that CMS collection. If you have a root around in the results, you’ll notice the Webflow ID is in there. Hazaar!

Now we need to write that Webflow ID back into the Plain Text field we created earlier.

  1. Create a new module, select Webflow, and select ‘Update Item’.
  2. Here you can map the search results from the previous processes to line up with all the fields of your CMS collection. I would strongly advise only using the bare minimum here to minimise errors.
  3. The important bit is to map the Webflow ID from the previous process (referred to as ‘Item ID’ by Integromat) to the new Plain Text Field which I called ‘Actor Webflow ID’.
  4. Hit OK.
  5. The final step is to add a filter in the middle of the two modules, so that this whole Scenario is only adding Webflow ID’s into CMS items that don’t already have it filled. So essentially, only add a Webflow ID to new stuff.

Click on the line between the two modules and add a filter. Here’s how I configured mine:

Now, repeat this entire process for your other CMS collection (which in my case is ‘Users’). The net result is to end up with two CMS collections where every item has a Webflow ID sitting in the Plain Text Field.

Now the Integromat side of things is done. I set this flow to occur every 5mins, which will be checking Webflow every 5mins to check for new stuff to add a Webflow ID to.

Righto - Zapier. Now things get easy again. Turns out Zapier/Webflow Multi-Refs just need the Webflow ID in order to work. Not the ‘name’ or ‘title’ of the Webflow CMS item (which would be intuitive and make a hell of a lot more sense), but the unique Webflow ID string.

So it’s as simple as setting up your Zap with a Trigger (in my case a Form Submission when someone clicks on a Favourite button). Make sure your form submission is sending the Webflow Item ID for both sides of the Multi-Ref (in my case the User and Actor) along for the ride when it submits, which you can hide from the UI if you need (there’s another forum post on how to do that).

Now all you need to do, is create an action step on the Zap which is ‘Update Live Item’, and map the Webflow Item ID into the Multi-Ref field. You’ll need to map the other Webflow ID into the ‘Item’ field, so it know which CMS Item to be fiddling with. So in my case, the Item field is the Actor Item ID, and the Multi-Ref field is the User Item ID.

Run a test, and observe the magic.

Hopefully this helps someone!

5 Likes

This is really helpful. Thank you.

So helpful! Thank you very much!
I have a tricky question though, how is it possible to un-favourite an actor…?

Thanks a lot!

This is really great. I am trying to figure out something similar. Is there a reason to use Zapier in this case at all? Could you also use Integromat for the last step? Wondering because I am trying to keep things simple and not hit too many zaps.

You could use Integromat for 100% of the flow, however I ran into some odd bugs with Integromat (it was erroring on an image field which it thought was required).

Generally I like to use Zapier for all writing, and only use Integromat for fetching and sending IDs, as I think this is the most stable solution.

1 Like

Yeah I had this problem too - I don’t know how to remove a Multi-Ref entry using Zap/Integromat.

The workaround I used was to create an entirely new Collection, which I called ‘Favourite Instances’. Each item in this collection had a Reference link to the User, and to the Actor. On the frontend, my UI displays this Collection, not the Actor collection.

The reason I did this, is it’s waaaay easier to simply delete, or archive, an entire Collection item rather than to remove a Multi-Ref entry via Zapier.

One issue I am having when creating this updating the items from Integromat.

In my Update Item module, it is forcing me to choose an item. What did you do to make sure that it cycles through all CMS items instead of continually updating just one?

You mean that every time a user is favouriting an actor, you create a new instance in “Favourite Instances” so you can delete it if it un-favourite it?
That’s a good idea…
Aren’t you afraid to quickly hit the number of CMS items available?

@HughLaverty Thanks for your instructions. However, when setting up the zap in the final step, I can only see the Webflow ID of one CMS collection (which I put into the Item field). How do I get it to show the Webflow ID of my other CMS collection so I can put it into the reference field?

In my case, I have two CMS collections: Company and Client. When my company user (who is an item in the Company CMS collection) submits a form (to create a new client item in the Client CMS collection), their own item ID (Company CMS) doesn’t get submitted with the form. Is there a way to do that? Obviously I don’t want my company user to have to type their own company name into the form every time they create a new client. Is there a way to secretly “attach” the company user’s Webflow ID into the form? In your instructions you mentioned something about it, and said to hide the field in the form interface, but I didn’t quite get that.

Hey Alan,

Sounds like you need to add a step in your Integromat to get the collection details from 2 collections, and send both back to Zapier.

And regarding your question about forms, yep their certainly is - https://forum.webflow.com/t/how-to-add-hidden-form-fields-to-forms/1966

I use this hack quite a lot to send important details ‘along for the ride’ on Webflow forms. For example, I send ClientID & Client Name along with pretty much every form.

The way I always structure my Webflow pages is that most of my forms are located on a Collection Item page, which is the unique ‘dashboard’ or ‘interface’ for a single user. For example, Joe Bloggs would have a Collection Item page /joebloggs. I do this because it allows me to send CMS content from Joe Bloggs along for the ride on forms, like his ClientID and Client Name for example.

Another way to do it is by using MemberStack (if you’re using it), and use the Custom Attribute feature which allows you to send along any info that MemberStack has on that client/user. You can assign additional text fields in MemberStack, so you could put a ClientID in there too.

Thanks again! The post you linked helped!