How to add videos to a user profile in Webflow and Tangram

‍

Summary:

In this tutorial, you'll learn how to add videos to a user's profile page in Tangram. The process involves three main steps:

1. Sending Video Data to the Page:
   • Ensure the video data is being pushed to the profile page in Tangram. Go to the Pages tab, find the profile page, and click "Manage." Add the "videos" field under the relevant section (e.g., provider videos).
2. Setting Up Webflow:
   • In Webflow, add a div block to display the video. Align the div block appropriately and give it a name (e.g., "profile video"). Then, set the custom attribute tg-addon-id="videos" to link it to the Tangram data.
3. Adding a Custom Script:
   • In Tangram, go to the Script Manager tab on the Provider Profile page. Add the custom script for the provider's video section (e.g., "videos.js"). Ensure the section ID matches the one used for videos on the profile page.

Once these steps are completed, you can publish the page and videos will be displayed on the user's profile. To upload videos to a user's profile, you must request this feature from the Tangram team, as you cannot use custom file upload fields. Once enabled, users can upload videos directly to their profiles.

‍

Video Transcription:

" In this video, I'll be showing you how to add videos on a profile page of a user.    There's three steps. The first is you have to make sure that the video's data is sending to that page in Tangram. You would go to the wrench icon, go to the Pages tab, and find the profile page that's connected there. Click Manage.

And under The section, whatever the section is that you're putting the video data in. Let's just say provider videos. I'm going to push videos as a field there. And videos are tied to the provider role on that page.  Now that we have the data pushed to the page, we have to make sure that we have the attribute to pull that info from the Tangram payload into Webflow.

And the attribute that we'll be using is tg-addon-id equals videos. on a div block.  If I wanted the video to display like underneath this block here says they're confirmed information, I just need to make sure that the div block is aligned properly in Webflow, and I'm going to name it something like profile video, or you could name it like tg videos to make it clear it's a tangram attribute that's going to be connected to that element.

And it will be tg tack add on tack id in the custom attribute section, videos, plural, with an s. And if we publish that, and we also have the third step, which is a custom script on that page, under the Script Manager tab, on the Provider Profile page, for videos, then everything will work as expected.  We need to find the section for videos.

Usually, we only have one section per page, but in this case this section. That we want is section B eight three for the provider video section.  We'll go back to the page script manager. We'll look for B eight three. CI think that was the one. Let's double check that. B eight three C.

Yes, that is provider videos.  Under the script manager, we'll copy v8. 3c, the script, the global script for the provider section, and this is an old site so it's named something pretty messy, but on your version of Tangram it should say like provider profile above the script so it's easier to identify and we'll say provider videos script is the label of the new script we'll paste in what we just copied and change just the ending before the ".js" to videos.js save it videos. js and as long as all of that's added just to restate you make sure that you have the section Provider videos or on whatever section are using on your provider profile page. You're pushing the videos field from. The role that you want, you have it connected in the front end with an addon, tg-addon-id="videos"

And lastly, you have the script, videos.js, if it's user level videos added under the script manager tab of the page in Tangram in your admin account. If those three conditions are met, you can hit publish and you'll be able to see videos that have been uploaded to the provider profile display on your Webflow site. Please note that you do have to request this feature from the Tangram team to make it such that when you're editing a user's profile, they have the button to upload.

videos to their profile. You cannot use custom file upload fields for this. You have to request that the admin team to have this video upload capability, but once you do and you're logged in as user, it'll have a button similar to above where you can click upload video, upload the video, and it will display on the profile if you've completed the previous three steps."

‍