How to feature user profiles on your homepage or static pages in Webflow x Tangram

‍

Summary:
The tutorial explains how to create a Featured User section in Webflow using Tangram. It starts by copying a homepage template from Relume.io, pasting it into Webflow, and modifying elements like the nav bar, footer, and global styles.

A grid section from Relume is added for user profiles, renamed “Featured Users,” and adjusted for padding. The Tangram backend is then set up by creating a homepage entry, linking it to Webflow via the HTML template URL, and fixing layout issues.

To display user data, a section ID is defined in Tangram, specifying fields like profile picture, name, job title, and description. This ID is linked in Webflow using tg-section-id, and the data import type is set as tg-import-type="user". Attributes like tg-attribute are applied to elements (e.g., tg-attribute="profile_picture").

The section is tested and published, showing real user data. A filter for featured users is implemented by creating an admin-only "Featured" field and filtering results using a query string (?search=admin+featured). Additional filtering and sorting (e.g., by creation date or popularity) is demonstrated.

Finally, the same process can be applied to listings by changing the import type to tg-import-type="listing"

‍
Transcript:
"Hello, in this video we'll be covering how to create a featured user section on any page within Webflow and Tangram.  A common place to put a featured user section where maybe four random or four featured user profiles might display would be on the homepage.  For this example we're going to hop on over to Relume.

io to copy a quick template for a homepage. I'll just do home one. go into my Webflow project in the homepage and paste it in there.  I'll delete what I have in there right now and just paste that entire page body that we copied from Relume into here. And there's a couple things you'll probably want to do as well.

If you have a logged out nav component already created, you'll want to put that in place of the nav bar in the template.  We'll just delete the one it came with. And we also have a global styles template as well, which is just some. Things to make it easier to, to style within Webflow and can delete the duplicate one that came with the template.

Now we're ready to go unless of course you have a footer component that you want to put in place as well. And we also want to make sure that we have a section to display user profiles. And I believe Relume has one of these labeled gridless too. I'll go ahead and copy that straight to my Webflow clipboard.

And add it maybe right underneath the header section, or right under this trusted company section.  We'll select here, and make sure that underneath this Home 1 Customers section, we paste the new one.  I'll paste it inside of that main wrapper, drag it underneath. The appropriate section. Eh, we'll just leave it there above the above the trusted company section.

And I'll rename it maybe something like featured users for clarity. It has a little bit of a padding issue, so we want to make sure that we inherit the same padding as the sections above it.  Let me just copy paste the section above it to get all these padding global, padding container, padding large, padding section, and put the gridless component inside of it.

Those, so it's more evenly spaced like the rest of the sections. And it's best practice to probably rename this section to be appropriately named, like the Featured Users section would be a good name.

We'll change the title to make it clearer to be Featured Users.

And you could make this section limited to maybe 3 or 4 or 6, however many you want to feature. I think in this case I'll want to feature three to fit the design well.  I'll just for now delete these three to better visualize what it's going to look like. And I do want to have a button here, it's going to say view all users.

We can link that in the future to a search page with all of the users that's searchable in a directory with custom fields, but the main thing to connect Tangram to this page is we first need to make sure we have a corresponding back end page in your Tangram account for this home page in Webflow.  I'll be using a test site for this.

We'll go to the pages tab. I think I already have a couple connected, but we need a new one for the home page as it looks like we don't have a home page. Intangram to correspond with the home page here in Webflow.  We'll click plus new, home, create page. And we need the HTML template URL, aka the URL for the Webflow version of the page.

We'll quickly publish this and grab the webflow. io Or if you're published to a custom domain, it would be the custom domain provided link provided by Webflow when you hit that little arrow in the top right here. And we just copy the link from the URL and paste it into the HTML template URL. And what that does is it allows us to pull the design from that page.

And the best practice to delete any backslash that it comes with if there's nothing after it. Hit save.  Now what that just did is we have on. This site on our subdomain, the ability to go straight to this log, which is slash home, and see the homepage rendered in Tangram. You'll notice that there might be some layout issues, like we're seeing, or font changes so those can be fixed within Webflow.

I think probably it's this issue with the photo height not being set to auto, which happens occasionally in some browsers, so let me check here. Yeah, so it's height 100%. Some browsers don't like that, so I'll just set it to auto for now and republish and see if that fixes the issue.

And it looks like it did.  On app. tangram. co or whatever your platform subdomain is, slash home, which is the slug of the page we created in Tangram this represents the Tangram rendered version of the page and everything is looking good. Now how do we get the data to send to this page from Tangram?

How do we get the user data? And then link it up correspondingly in Webflow.  The first thing I'd do is I'd go back to the back end page in Tangram, and I'd define what data we want to send to that section.  We'll click into the homepage again, manage, go to the section settings tab, and we're going to define a section.

I usually, if it's like a tile design like this, I'd name it something like Featured user tile,

and we're going to send the data that will get pushed to that tile.  The field group, the type of data that we want to send to the tiles, some type of user,  the service provider in this case. I want to send the service providers to that featured section, and next we have to define the fields.  There will be like the avatar, profile picture, maybe a cover photo, the name, job title, description, I'll just send maybe for now the ID of the user, which is always best practice to add.

I think it's added by default, but I just like to add it all the time. Avatar, or profile picture. Description, it might be, yeah, it's called description here. Sometimes it's called about. We want the display name, and I think I'll just do that for now.

There's a lot of other fields that you could connect there. And once we have the field group and the fields defined getting pushed to that featured user tile section that we defined, we can now copy that section ID and go over to Webflow, and make sure that there is a div around this grid with that section ID.

I'll just, it's best practice to add a new div. around the grid.

And we want to name that div the tangram attribute we're connecting to it,  at a glance in the navigator we can see tg, which indicates there's going to be under the settings panel, a tangram attribute, and in this case we will connect tg-section-id to define the section and paste in that friendly section id.

And at a glance again you can see this is the featured users tile that's getting connected here. Now to make the We have to define the import type, which is like, what type of data are we rendering? And once again, this will be service providers. And I will give this div the import type div, the name, tg-import-type = "user", because it is a user import type.

You have two choices, it's either a user import type or a listing import type. depending on what data you want to render there. And that will indicate that the attribute connected to this div, this tgImportTypeUser div in the settings panel will be tg-import-type, if I can spell it correctly, tg-import-type = "user".

And what this does is it says Anything inside of this TG import type user container, we're going to duplicate that for every user in the data payload that gets sent.  If there's three users that get sent over that match the conditions that we're sending to this section, it would show three, and if we say limit six, it would show six.

Or if there's only two featured, it would only show two here, if we're filtering for just featured users. But you only need to have one of the tiles in Webflow, like an example. tile that will be duplicated automatically for all of the users that will end up being displayed from the tangram data. Next up, once we have the TG import type user defined, now we can connect the independent fields within that import types.

It, now it knows that these are going to be service provider or user fields.  We'll click on the photo element to hook up the avatar field and you can go to the push fields tab or the fields table to copy the ID.  In this case, I want the profile picture here. I'd go to the settings panel and do tg-attribute =, paste in the field ID.

And if I wanted to rename this to be like, the image, I could to make it clearer in the navigator what that is. But I will hold off from renaming all the classes the field names. And as the only part essential to connecting the data is adding in the custom attribute section, tg-attribute = the friendly field ID.

Next step, let's do display name, copy the ID. Go to the settings panel, tg-attribute, and paste in the Friendly ID. Next up, description. And you can do some custom javascript and there's some code snippets you can put in the global script to truncate the text to just three lines if you don't, if you want the whole description to show, just contact a member of your team if you'd like that script, tg-attribute, paste in the description field there.

I think in the global styles usually we have a the code to truncate the text. It's usually called text style

lines like three, oh, text style three lines.  This is the code that you would put in the in the custom code section to allow you to apply this class text style three lines to clamp it at three three lines.

Now that we have all of the attributes connected, you could link as well to the user profile page, which would just be your subdomain slash users slash user underscore ID to link to the profile page for this user, and then you would need to pass tg-attribute = "link". As we're passing a user ID in there so that it knows to grab the user ID and put it here.

Anything with a curly brace like user ID or listing ID requires the tg-attribute = "link" to be on that link element. But now we can go ahead and publish now that all of our attributes are linked up in Webflow and theoretically, if everything's hooked up correctly, it should pull in all of the service providers into this section with their profile picture, their display name, their description, everything else we didn't really link up, but let's go to it.

Slash home and see what's connected. Awesome.  It seems to be working. I think that the reason it's showing lorem ipsum here is because there's no description set for these users.  We can go ahead and check in the users table for this Rowan Sinclair. Yeah, so the bio's just not set. But if I set it to high here, hit save.

Go back to the Home page,

and it replaces to high. There's also things you can do to set the min height of the card to make it consistent. But, looks like that is working. Now, let's say we want to filter this section just for featured users. The way, the best way to do that would be to create a featured field that only the admin has access to.

I'd create a new drop down field that says feature? And we'll make it an admin only field. I'll just label it as such so it's clearer. And the drop down values in this drop down that we will be connecting to the user profiles will be Admin Featured, or you can make it Featured. And you can add as many values as you want to tag users that tags that you can then use to filter sections on various pages, like the homepage.

We want to connect that to the service providers. We'll create that connection and what that just did is now when we're editing a service provider profile as an admin, like a service provider, there will be this ability to feature the user and hit save. Now to truly make it such that this field is only visible to admins, you want to check this box after clicking the pencil icon on the manage users page while logged in as an admin to make sure that sellers or buyers don't see the ability to feature themselves on the home page.

Now we have Rowan Sinclair as the only person who's featured. And if we go back into the homepage within Tangram and go to the Script Manager, we can filter the data for just featured users by editing the global script. And at the end, you can just append question mark, search equals admin plus featured.

You put a plus because that's replacing a space in the value. Hit save, and if we go back to the home page, it now should only show featured users home, and it only shows Rowan, so it's working as expected. There's a lot of other things you can append to the global script, some common examples, which are also linked in the technical docs section here.

In your admin account, you'd be able to set a limit.  Maybe if you want to limit it to four, you could do and limit equals four, three, we'll hit save. And the syntax is just, you want a question mark for the first before the first parameter and then anything after that, like a limit or sorting or additional search field parameters will require an and in between the commands. And if I wanted to sort, I could do

sortby, or if it's appended at the end, I would do another and sort underscore by equals created at, maybe, the date created. Descending or ascending. You would just put a space like that or ascending. And there's a lot of different capabilities that you can sort by. Like popularity, aka how many times a user's profile has been viewed.

Or things like that within the filtering and sorting section of the technical docs. Here's some of the options you can sort by. And if you want to filter for a specific field value, you would do question mark, val underscore and then the field ID. Let me just quickly show that, as that's something that comes up a lot.

Let's clear all of the syntax things we have here to make it less cluttered, and if we wanted to filter just for a specific value of a field, I would do, or multiple, you do val underscore, and then the not friendly ID. And the way that you would get that is you go to the fields table, and let's say, I think we don't have a category field, let's do

It looks like we don't have a category field right now, I'll just hypothetically make one. Drop down field for category. Oops, misspelled that.

Add some values in there. Connect that to service providers.  The not friendly ID would be directly in the URL when you're editing that field in the fields table. And as long as you copy that ID in that global script, you can pre filter The section on any page, like the home page. By that specific field value.

If we only wanted service or service providers with category one tagged, we could do question mark Val underscore that not friendly ID equals category plus one, and that would make it such that only users with category one would show up on the homepage. I don't believe anyone's tagged with that right now.

None should show up, which is what we would expect. But then if we go to Rowan's profile again and connect category one,

he should show up on the homepage section, which he does.  Hopefully this is helpful to show you how to feature or pre filter sections across your Webflow pages with Tangram. In another video we'll be covering how to do this exact same thing, but with listing tiles it's very similar, but instead of tg-import-type = "user" you'll use tg- import-type= "listing" and push listing data to the section."

‍