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