Tab Groups - Using Embed Codes

This type of Embed Codes, Tab Groups, has been designed so you can have multiple pages inside of one page where you can access them all without having to leave the page.

Adding a Tab Group

To use this feature you will first need to create a Tab Group which can be done in Embed Codes >> Tab Groups.

Click the + Create New Tab Group, you can then name it. You could call it whatever you need it to be whether that be staff pages, curriculum, pupil premium or even blog pages. You can create multiple Tab Groups to go on different pages.

Creating Your Tabs

Once you have created your Tab Group you will then be brought to this page where you can change the name of the Tab Group by clicking the blue Edit Group button. This is also where you will add your Tabs which will be the pages inside of your Tab Group. 

To Create these pages you will need to click + Add Tab. 

Upon pressing add tab you will need to give the Tab a title.

The content box is where all you images and text go that you would want to appear on the page on your website. It is the same layout as the content box found in pages so all the same rules apply. The only difference is adding embed codes into it such as Document Groups and Photo Galleries. To add these in you will need to copy the embed code and the paste it into the content box. Once you have finished click save. 

They will appear like this once they have been created. (see below)

To reorder them you have to use the grey arrows to move them up and down.

If you need to edit the tab, you can come back to it, click the blue pencil to the right of it and edit it as normal.

If you wish to delete a Tab you have to click the red bin, a message will show up confirming if you want to delete it. Once deleted it will be very hard to recover so you will have to be sure you want to delete it before doing so.

Embedding Tab Groups onto Page

The Embed Code will look like this:

{tab-group:policies}

You can access all the embed codes by clicking on the expandable box called under the content box titled embed codes. Simply right click to copy and  use Ctrl-V to paste the embed code provided for the Tab Group.

Once you have embedded the code onto the page scroll down to the bottom and click save.

It will then look like this on your page, it appears as a normal page, however if you click on the titles next to each other it will then show the content for that part of the Tab Group.

Linking directly to a Tab Group that is embedded in a page

You can now link straight to a specific tab within a Tab Group that’s embedded on a page.

To do this, use a hash symbol at the end of the page URL in this format:

#tab-{Tab ID}

Example:

If your page is:

https://sample.schudio.com/Curriculum

and your Tab ID is 168  ,

your direct link will be:

https://sample.schudio.com/Curriculum#tab-168

Clicking that link will take someone directly to the right tab within the group on that page.

See Which Pages Use a Tab Group

You can now also see a list of all the pages where a Tab Group has been added.

To do this, go to your Tab Group settings, and you’ll see a list like this:

This can be really helpful for keeping track of where your groups are being used across your website.

Important Considerations

Linking directly to a Tab Group is only available for Tab Groups and not for Accordians

Embed Codes: See Where Your Content Is Being Used

We've introduced a helpful new enhancement to the CMS that makes managing embed codes much easier.

When viewing any embed code within your website editor, you can now see exactly where that embed code is being used across your website.

How to View Where an Embed Code Is Being Used

1. Navigate to Embed Codes within your CMS.
2. Select the embed code you would like to review. This works for all embed code types, from Document Groups through to People Groups.
3. Click on the blue hyperlinked title of the embed code.
4. Once the viewer opens, scroll to the bottom of the page.
5. You will now see a list of all website pages where that embed code is currently displayed.

Why Is This Useful?

This new feature makes it much easier to manage and update content across your website. Instead of searching through pages manually or creating multiple versions of the same embed code, you can quickly identify where a particular embed code is being used and make updates with confidence.

Whether you're updating documents, forms, people groups, or other embedded content, you'll always know exactly where your changes will appear.