📝 Overview
The TeamUp widget lets you embed your Customer Site directly into your WordPress pages or posts, giving customers seamless access to your calendar, bookings, memberships, and more, all without leaving your website.
Adding your TeamUp widget to a WordPress-powered website is extremely quick and simple, and we'll outline how to set this up below.
✋ Before You Begin
To embed the widget, you’ll need:
Access to your WordPress dashboard (admin area)
Your TeamUp widget embed code, which you can copy from Customer Experience ➔ Customer Site ➔ View Embed Instructions in your TeamUp business dashboard
A page or post on WordPress where you want the widget to appear
🌐 Adding the TeamUp Widget to a WordPress Site
You can add your TeamUp widget to your WordPress site in 6 easy steps.
Click here to see these steps
Click here to see these steps
1️⃣ Log in to your WordPress back-end.
Sign in to your WordPress site’s back-end, where you manage your pages and content. Enter the username and password specified when setting up WordPress.
💡 Your WordPress site’s back-end or “administration area” is where content creation and editing happens.
The default location for your back end is http://yourWebsite.com/wp-admin (replace “yourWebsite.com” with the address of your website).
2️⃣ Go to the Pages section (Add a Page)
After logging in you’ll see the administration dashboard and a left-column menu.
Content should be organised under Pages or, for blogs, under Posts. Posts and Pages are virtually the same in regards to editing. In this article, the images and discussion focus on Pages.
Click 'Pages' or sub-menu 'All Pages' to see a list of existing pages. Click sub-menu 'Add New' to create a new page.
3️⃣ Edit the page
💡 If you created a new page, you can skip this step.
To edit an existing page, hover over the Page Title (e.g. Home in the sample image below) in the list of pages to see editing links. Click 'Edit' to modify the specified page.
4️⃣ Add a Coe Block and HTML
Here you will need to add a new code block that will allow you to paste in HTML directly. To create a new code block, click the plus (+) sign and select the 'Code' option:
In the code block editor, click the three little dots and select the 'Custom HTML' option in the drop-down menu:
5️⃣ Paste the widget code
Paste the widget code you copied from the Customer Experience ➔ Customer Site page on TeamUp.
6️⃣ Publish your Widget
Publish your changes and your widget should appear on the desired page.
Click Publish (for a new page)
or Update (for an existing page)
Your TeamUp widget should now appear on that page when viewed live.
💡 Note that the breakpoint at which the widget will switch to the mobile version is 940px.
Tip. If you’re seeing the text of the script on your website after embedding, try method 3 here.
❓ Frequently Asked Questions (FAQ's)
Click here to see frequently asked questions
Click here to see frequently asked questions
What is the TeamUp widget?
Click here to see the answer
Click here to see the answer
The widget lets you embed your TeamUp Customer Site directly into your website. It shows your calendar, class schedule, bookings, and other customer site features, all in one place.
Do my customers need to log in to use the widget?
Click here to see the answer
Click here to see the answer
Yes, customers will use their TeamUp credentials to log in and manage bookings, memberships, or purchases through the embedded Customer Site.
Can I use the widget on multiple pages?
Click here to see the answer
Click here to see the answer
Yes, you can embed the TeamUp widget on as many pages as you like, but typically only one widget per page provides the best experience.
Will the widget work on mobile devices?
Click here to see the answer
Click here to see the answer
Yes, the widget automatically adapts to mobile screen sizes (the layout switches below 940px).
Where do I find the widget code?
Click here to see the answer
Click here to see the answer
In your TeamUp business dashboard, go to Customer Experience ➔ Customer Site ➔ View Embed Instructions. From there you can select which widget type and then copy the generated code.