How to Add Multi-Reference Fields to Webflow through Zapier

hey friends so in today's video i am
going to be showing you how you can
populate
multi-reference items inside of webflow
using zapier
so let's get into it
hey friends welcome back to the channel
if you're new here my name's connor i am
the founder of the unicorn factory a
freelancer marketplace
in new zealand and now also in canada
and i use this channel to show people
how they can build their own online
marketplaces using noco tools like
webflow eartable and zapier so today i'm
going to be doing a more advanced
tutorial and that is how you can use
zapier to automatically populate
multi-reference fields inside of webflow
so in order to make this workflow happen
today we are going to have to use some
custom code and i just want to tell you
straight up front that if you are brand
new to no code this is some of the more
advanced stuff that you really don't
need to know about at the beginning
the use case that we will be solving
though is one that comes up quite
frequently for people who use webflow as
their cms
and that is to automatically populate
the multi-reference fields when sending
data from ear table to webflow but
before i dive
into this please be sure to like this
video subscribe to the channel and i'll
be making heaps more videos like this in
the future
but without further ado let's just go
and check out the example today which is
me setting up categories for my blog so
what i want to do today is i've got a
list of all of my youtube videos that i
put on my website
and what i want to do is i want to apply
different tags to these videos so that i
can then create separate category pages
so it's easier for people to find
so if we have a look into the webflow
cms you can see that i have a table with
all of my videos and if we go and have a
look
to see how this collection is structured
you can see it has a thumbnail
description
a url a rich text field in case i want
to add additional info
and also a link to the video so that the
youtube video shows up on my page
what i want to do now is i want to add a
category field that
links to another table that i have to
create now so the collection i'm going
to be creating
is the category collection and for now
i'm just going to leave
the name and the slug i might add some
additional information in the future but
for the sake of this example that's all
we really need
so what i'm going to do is i'm just
going to populate a few different
categories that might apply to my videos
and now what i want to do is inside of
my
youtube collection list i want to add a
field which
is a multi-reference field and i want to
call this
category and then i want to connect it
to that collection which i will now be
able to find down here and now if i jump
back into
my video collection i can see that i
have a
new field right at the bottom that
allows me to add
certain tags to my videos so when you
can link
multiple items from another collection
to another table or a different item
then what we call that is a
multi-reference link so what you can do
now is you can now add those tags to
your page
all you need to do is just select a
collection list wrapper
select the categories field from the
drop down list
and then what you can do is you can just
drop in a link
add a tag and then you can dynamically
populate that information with the data
that is currently sitting
inside of that collection list for tags
so then you can style those tags
and you can then link it to that
category
so what you can do then is you can then
create
a template page for those category pages
and what i'm going to do here is i
actually have a page for my tutorial
library and what i'm going to do is i'm
just going to
copy this jump over to my categories
page and
paste it in there so now what you can do
is you can filter out all the videos
based on the category so i want to only
filter out the categories that apply to
this page which is currently the webflow
page
so what happens now is it filters out
all of the videos
that are currently without the web flow
tag
you can then also populate different
headings with information that is
currently in that collection item
so this is a really great way to create
dynamic pages for your collection i do
this with the unicorn factory and it's
really great to create like individual
pages for skills or services and all
that type of stuff
and it's really good for seo so that's a
little secret tip so that is the basics
of how you work with multi-reference
collections now
one of the challenges that you're going
to come up with is when you use air
table to manage your database and you
want to send that information
from airtable to webflow then zapier is
going to cause some issues because you
can't
populate the collection items for the
multi-reference field
in the same way that you would do it
with single item references
so before i show you how the zapier
setup works let's have a quick look at
how you have to set
up airtable in order to make that
workflow work
so as you can see here i've got my
videos in here and now you can see on
the side i also have a category field
that links to another table
inside of my ear table base that
category
is over here and as you can see here
each category has a name
and it also has a video that is
associated with it now before we start
off with the next step one thing that
we're going to have to do is we're going
to have to add a web flow
item id so if you don't have the webflow
item id this step will not work
whenever you have a collection an ear
table and inside of webflow then you'll
need to have a separate field for the
webflow item id so that you can send
data back and forth
okay so i've copied and pasted out the
webflow item ids
from webflow and pasted them into this
field here
and now if we click on this button here
and add a
lookup field what we can do is we can
then get
the webflow item ids that will be comma
separated so we will be coming back to
ear table because there's one more
additional modification that we're going
to need to make
to the fields but i'm now going to jump
over into zapier and i'm going to show
you how you can set
up the zap that allows you to send that
data from
ear table to webflow so now we're back
inside of the zapier and now we want to
define the trigger and the trigger that
we are going to be using is a new record
is moved into view
so the video that i am going to be
adding in this example
is my latest video on me setting up a
freelancer marketplace
in canada so what i want to do is i just
want to populate the title of the video
i also have the image and now i also
want to apply some tags so just for this
example i'm going to apply a web flow
ear table and zapier i'll be changing
all this later but you know
for the sake of the example so now what
i want to do is i want to change it from
backlog to a ready for publish so what
that will do is it will
move that record to a new view inside of
your table called be ready for publish
view
and now if i go and trigger it i'll get
all the information that i need
to populate webflow so the first step in
setting up webflow is just to
go and actually create the item so i'm
just going to create a live item
select the site and the collections and
then just start populating the
information
so now you can see the categories field
down here and i think a lot of time what
people try to do is they try to add the
comma separated item ids that you can
get from that lookup
inside of ear table but unfortunately it
doesn't work like that
you can do it like that for single
reference items but not for
multi-reference items and once you've
tested all that
it should have created a live item
inside of webflow that is now
live on my website if we go and check it
out you can see that it's automatically
shown up here
and because i didn't really put any
information into it it currently is not
working correctly so the next step that
i'm going to be showing you is
what allows us to add tags or categories
to our collection items now there is a
lot of technical stuff involved with it
for example looking up api documentation
so for the sake of time
i am just going to show you how it works
and i will give you the code snippet
that you need to use for this step
on my website so you can just copy and
paste it from there so the
app that we need to add to add tags to
our collection item
is webhooks now webhooks by zapier is a
premium feature so i'm not exactly sure
what plan you need to be on but you do
have to be on one of the higher plans in
order to be able to access this
particular app so the action event we
want to pick
is custom request and the method that we
want to use
is patch now what patch means is it
basically
adjusts or fixed an existing record and
because we already created the item
in step two all we need to do is we need
to
patch it so what we want to add in the
url section
is this url here which is api.wipro.com
collections and then what you have to do
is add your collection id so if you are
updating
for example your youtube list then what
you need to do is use the collection id
of that youtube list and populate that
value in here and then
slash items and then slash collection
item id and so the
item id is what you would have populated
in
step two and that is directly referring
to the webflow item id now if you want
the
item to be live immediately then you
also want to add a
question mark live equals true so i got
all of this information from the
webflow api documentation which i'll
link in the video below but now what you
want to add into the data field
is your body so basically the
information that you are sending to that
particular webflow item id now i'll be
leaving this code snippet on my website
for you to copy and paste but you will
have to make some adjustments of your
own
so this is what the code snippet looks
like it's open bracket field blah blah
blah
and what you need to do then is you need
to add your own
field name so in my case it will be
categories
and then what you want to do is you want
to have a an array and so an array
is basically a comma separated item id
and each item id has to be in
parenthesis
so it's basically this array of item ids
however we need the item ids to be in
parenthesis
so there are multiple ways you could do
it but i came up with this little hack
that i think
works quite well so what you want to do
is you want to add a formula
and what you want to do is you want to
add this little step here which
basically puts
your webflow item id inside of
parentheses
so i'm just going to name this webflow
item id
for zapier so now what we can see is
that the webflow item ids are basically
the same but this time they are in
parentheses
so now when we go back to our youtube
step what we want to do is we want to
actually look up the webflow item id for
zapier and what we will see
now is that the fields are in the format
that we need
to send to webflow through that custom
request step which means that now
what you can do is you can take out
this step here and replace it
with the web for item id field for
zapier
and basically what that does is it gives
us
the values that we then want to send to
zapier so
honestly i wouldn't overthink it just
follow the steps that i took and you'll
be able to send those tags
from ear table to webflow now in the
header we want to add
bearer and then you add your api key so
you can find all the stuff in the
webflow api documentation so with the
url you can dynamically populate the
information by just using the values
that were created in step 2 when the
item id was created
for obvious reasons i'm not going to
show you what my collection item id is
but then when you re-test this step
you can see that all of the tags have
automatically been added to your live
item and it all works now
and then the last step that i'm not
going to show you in detail but is to
just go back now
and update your youtube videos inside of
ear table so that the slug and the item
id are populated in case you want to
make changes to it in the future
and that's it that's about as
complicated as it will get when you're
setting up stuff inside of zapier or at
least as far as i have found
and you know it's a really good example
to see how you can use
actual code with these no code tools and
really the fact that you can use them
together is what makes this all so
powerful
i hope you enjoyed this tutorial if you
did please let me know in the comments
down below how it's working for you
and i look forward to seeing you back
for the next one

‍