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.
- Create an Integromat account if you don’t have one.
- Create a new Scenario.
- Create a new Module, search and choose Webflow. It will ask you to connect your Webflow account, do this.
- Now click the canvas to create a new module. Choose Webflow as the app, and choose ‘List Items’ as the action.
- Fill out all the fields to point it to the correct CMS collection, in this case ‘Actors’.
- 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.
- Create a new module, select Webflow, and select ‘Update Item’.
- 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.
- 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’.
- Hit OK.
- 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!
) ,
