Common action or redirect links in Webflow and Tangram

‍

Summary:

This video demonstrates how to connect links across a Tangram-powered site, excluding navigation bar links, which are covered in a separate video. It explains linking elements such as:

1. Search Page Listings:
   • Use a tg-import-type=listing div.
   • Add a link block inside this div and assign it the tg-attribute=link to enable dynamic URL generation.
   • The URL format is:
     https://app.yourcompany.com/listings/{listing_id}.
2. User Profiles in a Directory:
   • Use a tg-import-type=user div.
   • Add a link block named "user link" with the tg-attribute=link.
   • The URL format is:
     https://app.yourcompany.com/users/{user_id}.
3. Call-to-Action Buttons on Product Details Pages:
   • For booking or purchasing, use the URL:
     https://app.yourcompany.com/listings/{listing_id}/new_transaction.
   • Attach tg-attribute=link to the button or link element.
4. Chat Buttons:
   • For contacting sellers/providers, use the URL:
     https://app.yourcompany.com/users/{user_id}/new_chat.
   • Ensure the element is within a div or element with the HTML attributetg-import-type=user to access user data.

Deprecated attributes (tg-user-value, tg-listing-value) are no longer required; use tg-attribute instead for clean implementation. Additional videos will cover linking features like favorites.

‍

Video Transcript:

" In this video, we'll be showing you how to connect links across your site, and this will not include links in the nav bar. We have a separate video regarding navigation links, so do check that out if you're interested in figuring out how to link those. In this video, we'll be covering How do we link from a search page to a specific listing or user profile, as well as how do we connect the call to action buttons on the product details page to initiate the checkout flow, to start booking or purchasing something, as well as connecting a chat button if you wanna chat with the owner or seller of a certain listing if you have questions as a customer.

In another additional video, we will be covering how to link up the favorites feature in Tangram, but it won't be covered in this video. , if we have a listing on a search page like the template we're currently looking at, you can imagine a bunch of products here, or services listed with an image, maybe a title.

How can we make it such that we click on the specific listing tile and link it to that listing on the live site?  Within the tgImportTypeListing div, which has generally a tangram attribute, tgImportType equals listing, within that we need to add a link block element from Webflow.  We go to the element section of Webflow, drag in a link block, and you want to make sure that link block is inside of tgImportType equals listing, so that we can access tangram data about that listing, like the ID that we need to pass in the URL.

To direct that listing and please note that you can't nest link block so if we have the favorite link, you'll have it'll be have to be at the same level as the outer link itself like this And on the link block we maybe we'll give it an appropriate name like listing link And to make sure we direct it to the right place.

We have to pass a listing id to make sure that it, we're viewing that specific listing. And the structure of the link will be your subdomain, tangram subdomain, which might be like https://yourcompany.tangram.co or if you connected the custom domain, it'll be that (e.g. https://app.yourcompany.com). Make sure you have HTTPS in front of it.

Slash listings, plural, slash curly brace, listing underscore ID, and this is us passing the listing ID program in there. And that will be it. It's just slash listing slash listing ID inside of curly braces. And to allow us to access that listing ID and pass it as a parameter, we have to add a tangram attribute.

tg-attribute attribute value link.  That lets us link the specific listing or user. in the URL.  That will be the path if you want to view a listing. It'll be your subdomain slash listing slash curly brace listing underscore id and you can do that all throughout the platform as long as it's directly inside of tg import type.

equals listing, then we can access that listing ID if we have tg-attribute equals link attached to the link parameter, or the link element, it could be a button or a link element, where we want to send it to that URL. Now how do you do it on a user search page? Let's pretend, hypothetically, this is a user profile on a directory instead of a listing this would be tg-import-type = equals "user" instead of "listing". It should be named accordingly in your, in your marketplace, and the link, you would probably name it something like a user link instead of a listing link, and the path you would send it to. And once again, we're hypothetically, if this is, if we want to send, To the current user profile not listing it would be slash users slash user underscore id and that would take us to the user profile if this were a user directory.

Now let's explore the product details pages and how to hook up chat buttons there or the the call to action to book or purchase something.  Under the details pages template I will Use the service details page as a hypothetical example.  If we wanted to connect to this book now and check availability button, and you can change the text to whatever you want, it'll be the same like, checkout URL that you would send it to, no matter whether the listing is a service or a product.

You would pass tg-attribute=link

to pass the ID of the current product or listing. And the route would be https, your subdomains, let's say, like, company. tangram. co slash listings slash curly brace listing underscore id to pass the id in the url slash new underscore transaction and this will initiate the customer to be redirected to the tangram checkout flow based on the settings defined on your platform and this will be the same link that you would copy and paste on all of the details pages for whatever listing types you have that have a unique design for the details pages.

It'll be slash listings, slash listing ID, with curly braces around it, slash new underscore transaction. And we have to have tg attribute equals link whenever we pass a parameter in a curly brace like the listing ID or user ID. If we wanted to add a chat button to contact the seller or provider, we would do tg attribute link on the link element.

And the route would be, it would be the subdomain slash users slash user underscore id slash new underscore chat if we want to initiate a new chat with the user. Please keep in mind that if we are passing a user id, it has to be Whatever element has that attached to it, that URL with the user ID attached to it, has to be inside of a tg-import-type="user" container in order to access that user data.

Similarly, if you're pulling in seller data on the product details page, all of this here would need to be inside of a tg-import-type="user" container to access things like the provider's name, when they were created, their description, etc. Very similarly, on the profile page of a seller, you can connect their contact button using the same link.

It would be the subdomain slash users slash user underscore id slash new underscore chat, same as the link we just covered, and the attribute to pass the parameter would be tg-attribute. If you notice things in your project that said like tg-user-value, tg-listing-value, that's a deprecated way of connecting this link.

In the, to pass the link of the parameter as a parameter in the URL. It may still work, but you don't need to use that attribute anymore. You can just use tg-attribute for everything, so it's nice and clean."

‍