Embed the Tribe Iframe, Toasts (pop-ups) and the Carousel on your website, and use them together to bring prospects to your ambassadors.
Your platform works best when prospective students can find and talk to your ambassadors without hunting for them. Tribe gives you three ways to bring the platform onto your site. All three are generated from the same place and pasted into your website editor.
Element | What it is | Where it goes on your site |
Iframe | Your main community hub — prospects browse and chat with ambassadors | A dedicated "Chat with a Student" page |
Toast | A compact pop-up card that sends visitors to your Iframe | High-traffic pages across your site |
Carousel | A horizontally scrolling strip of ambassador profiles | Anywhere you want a visual prompt |
This article covers generating and placing the code. For what to do when something doesn't appear, see Embed Not Showing on Your Website.
Before you start
- You need an admin account on Tribe.
- You need edit access to your website, or a colleague who can add a code or HTML block to a page.
- Decide which page will host the Iframe. Most universities use a dedicated page named "Chat with a Student", "Talk to Our Students" or "Community".
- If your website uses a Content-Security-Policy, ask your web team to allow
https://app.tribeadmissions.comfor scripts and frames.
Everything below happens on the Embedding page. Open it from Embedding in the sidebar.
🏗 The Iframe (your hub)
The Iframe is the main interface where prospects browse and chat with ambassadors. Host it on one dedicated page.
How to embed the full Iframe (all ambassadors)
📷 Replace the image at the end of these steps with A02-embedding-full-iframe.png
- Open Embedding from the sidebar.
- Go to Full Iframe Integration.
- Leave Question and Answer unselected. Every visible ambassador on your platform will appear.
- Click Copy on the HTML block, or click the code itself. Copied to your clipboard! confirms it.
- In your website editor, paste the code into your chosen page at the exact position where you want the Iframe to appear.
- Save and publish the page.
How to embed a filtered Iframe (one group of ambassadors)
🗑 Delete the image at the end of these steps (old A03)
Use this when a page should only show a particular group — engineering students on the Faculty of Engineering page, for example. Visitors don't see the filter and can't remove it; that question's dropdown is hidden for them.
The steps are identical, with one addition:
- Open Embedding → Full Iframe Integration.
- Under Question, select the profile question to filter by (for example My area(s) of study).
- Under Answer, select the answer to include (for example Bachelor in Mechanical Engineering). Only ambassadors with that answer will appear.
- Click Copy and paste the code into the page, as above.
🍞 Toast notifications (pop-ups)
A Toast is a compact pop-up card that appears in a corner of a page on your website. It shows one ambassador who matches a filter you choose and links the visitor through to your Iframe. If you pick a question without an answer, the card shows that ambassador's own answer to it.
Place Toasts on your highest-traffic pages — Student Life, International Students, Accommodation, individual course pages — and match the filter to the page. A Toast on the Mechanical Engineering page that shows a Mechanical Engineering ambassador converts far better than a generic one.
How to create a Toast
📷 Replace the image at the end of these steps with A04-create-toast.png
- Open Embedding and scroll to Toast Notifications.
- Go to Create New Toast, below your saved toasts.
- Choose how to pick the ambassador:
- By Question tab: select a Question. To show any ambassador, stop there. To show only one group, also select an Answer.
- By Ambassador tab: select one specific ambassador to always feature.
- In the Toast texts box, pick the language tab you're writing for. If your platform runs in more than one language, fill in each tab in turn. A dot marks the languages that have their own text; one left empty falls back to English.
- Custom Text (optional). Write a short message for the card — three lines at most. Leave it empty to use your platform's default toast text, for example (Want to find out more about student life? Chat with our student ambassadors and ask any questions you have).
- Custom button text (optional). Leave it empty and the button reads Chat with [ambassador's first name]. Fill it in for something general, such as Chat with our students.
- Position. Choose Left or Right — which side of the page the Toast appears on.
- Click Toast!
The new Toast appears at the top of Saved Toasts, with its code beneath it.
How to put a Toast on a page
📷 Replace the image at the end of these steps with A05-saved-toasts.png
- In Saved Toasts, find the Toast you want. Each shows its filter and its text.
- Click Copy beneath it.
- In your website editor, open the page where the Toast should appear.
- Paste the code just before the closing
</body>tag of that page.
- Save and publish the page.
How to edit or remove a Toast
- The pencil icon on a saved Toast lets you change its message and button text. The code stays the same, so pages already using it update automatically.
- The bin icon deletes the Toast. Pages still carrying its code will stop showing it.
- A warning on a saved Toast — No ambassador currently has the answer this toast is linked to — means no ambassador matches it any more. Visitors see nothing on that page until you edit the Toast or an ambassador matches again.
🎠 The Carousel
The Carousel is a compact, auto-scrolling row of ambassador profiles that moves from right to left. It's a lightweight, visual way to show the faces behind your platform without giving a full page to the Iframe.
How to embed a Carousel
📷 Replace the image at the end of these steps with A06-carousel.png
- Open Embedding and scroll to Carousel.
- Under Question, select the profile question to show on each card. My area(s) of study usually works best — it's the detail prospects scan for.
- To show all ambassadors, leave Answer empty. To limit the Carousel to one group, select an Answer.
- Copy the generated code.
- In your website editor, paste it at the position on the page where the Carousel should appear.
- Save and publish the page.
Quick reference: where does the code go?
Element | Where to paste |
Iframe (full or filtered) | At the point in the page where it should appear |
Carousel | At the point in the page where it should appear |
Toast | Just before the closing </body> tag |
✅ Check it worked
Open the published page in a private or incognito browser window.
- Iframe: ambassador cards load where you pasted the code, with a Powered by Tribe badge at the bottom. Filtered Iframes show only the group you chose.
- Toast: the card slides in on the side you chose, after a moment on the page. Clicking its button opens your Iframe.
- Carousel: the strip scrolls right to left where you placed it.
If any of these is missing, see Embed Not Showing on Your Website.
🧩 Putting it together
If you're starting from scratch, this combination works well:
- One unfiltered Iframe on a dedicated "Chat with a Student" page — your hub.
- A Toast on each of your highest-traffic pages, filtered to match the page it sits on.
Together these mean a prospect can reach an ambassador from wherever they land, rather than having to find one page.
🔗 Related articles
💡 Still have questions?
Your Account Manager will happily walk through the implementation with you live. For anything else, email us at support@tribeadmissions.com — we're here to help. 🙂
Powered by