Security Note: This Feature Requires Administrative Access
To access the System Settings views, your 25Live user must have administrative security permissions (be in the -1 security group). If you would like access to this feature in your instance of 25Live, contact your 25Live administrator.
25Live provides the ability to embed content on other websites (such as your campus sites) including calendars, daily availability grids, weekly availability grids, event forms, and express scheduling forms.
Tip: If You Embedded Content Before 02/17/2021
If you added code to embed 25Live content before the 02/17/2021 update, which added saved configurations, we recommend recreating your embedded content with the new configuration options to be able to take advantage of new features and avoid possible issues.
1. Administrative 25Live Permissions and Some Web Development Knowledge
To access the Series25 Group Administration tool and the System Settings section of 25Live Pro, you will need administrative permissions.
Some of the steps involved in embedding content require editing HTML/CSS/JavaScript and the ability to save or publish web pages. You will need some basic web development knowledge and/or the help of a web developer at your institution.
2. Proper Permissions Set
Note: You can create a group/contact for embedding calendars and availability, however, you can also have the views default to using your 25Live Viewer Seat user.
Log in to the Series25 Group Administration tool to change group permissions, if needed. If you already have a security group set up for public users, it may be possible to use that group. However, it’s best practice to create a new security group for embedded calendars and grids and separate security groups for each embedded Event Form that uses a different configuration.
Each of these groups should contain new contacts created just for embedding content. In 25Live, this can be accomplished on the Contact Search page.
Tip: Make Searching Easier
If you include "Embed" in the first name of the new contact, it will make searching for your embedded content contacts easier when generating the code to include on your website.
Series25 Group Administration Help
3. Get a Saved Search or Item ID (for Calendars and Grids)
Saved Search (Query) ID
Embedding calendars or availability grids by search results or event details lists requires a saved search to show content. See Saving Searches. You will need to retrieve the search ID by running the desired search in 25Live.
Image: The search ID in the URL of your browser when viewing a search in 25Live. The ID in this example is 24922.
Highlight the URL in your browser then copy the number at the end of the URL. The number is the search ID.
Example:
https://25live.collegenet.com/pro/instancename#!/home/search/event/list/12345
“12345” in the example URL is the search ID number for that saved search.
Item ID
If you are embedding a calendar or availability grid view, you can do so by using an individual location or resource item ID.
Image: The Location's item ID is the URL of your browser when viewing a location's details in 25Live. The ID in the example is 11.
To obtain an individual item's ID, first go to the location's details view or resource's details view. Highlight the URL in your browser then copy the number between the words, "location" or "resource" and "details," in the URL. That number is the item's ID.
Example:
https://25live.collegenet.com/pro/instancename#!/home/location/123/details
https://25live.collegenet.com/pro/instancename#!/home/resource/123/details
“123” in the example URLs is the location's item ID number.
4. Choose a 25Live Contact (for Calendars and Grids)
All types of embedded content require you to choose a 25Live contact to associate with the content.
If you are allowing event creation from a calendar or availability grid you must choose which 25Live contact (and its accompanying security group's event form configuration) is associated. If you want to create a new configuration, go to the Config Settings in 25Live's System Settings.
Then, to associate the correct configuration with your contact's security group, go to the Security Group Options section within the same tab. You can also edit some configuration options in 25Live System Settings.
How to Embed 25Live Pro Content
Double Check the Prerequisites
Make sure you have set up with everything you need to complete the steps for embedding content, as described above, including:
- A contact set up as a public user (needed if allowing event creation)
- Ideally, a unique contact for each embedded content element in a new security group for embedded content users
- Saved Search or Item IDs
- For calendars, availability grids, and event details lists: A saved search ID or item ID
- If you intend to allow event creation from calendars or availability grids, users should be set up with the proper association of a new or existing user with the desired Event Form configuration for their security group
Getting to the Embedding Section
Image: The More menu in the top navigation bar has a link to the System Settings view.
After logging into 25Live Pro as an administrator or user with permissions to access System Settings (-1), open the More menu in the top navigation bar.
Image: The System Settings link is in the More menu.
Use the menu link to go to the System Settings view, then go to the Embedding section.
Image: The setting to log in as another user is in the Embedding section of the System Settings.
1. Copy and Add the JavaScript to the Head of Your Page
Image: The first step in the Embedding System Settings page instructs on how to add the head section JavaScript.
Follow the instructions in the Embedded view in System Settings to add the initial script within the <head> tag of your HTML (or code that will generate your HTML).
Note: If your institution prefers that the script source tag not be in the head of your page, it can be placed between the opening and closing <body> tags, instead. Just be sure to add it before any subsequent <script> tags.
Image: An example of the 25Live JavaScript added within the head of an HTML document.
You should only add this head section script once, even if you are embedding more than one content element on a page.
2. Choose Whether to Select an Existing Config or Create a New Config
Image: Select the Add Config button or find an existing configuration and select the Edit button beside it.
As outlined in the second step of the embedding page, you can select an existing configuration or use the Add Config button. Using configurations is an easy way to access saved settings later for editing.
Tip: If You Don't See Your Configuration Listed
If you added code to embed 25Live content before the update that added saved configurations, the old content won't be listed in the configurations dropdown menu. We recommend recreating your embedded content with the new Embedded Configurations options to be able to take advantage of new features and avoid possible issues.
3. Complete All Configuration Fields
Base Information
Image: The Name, Target ID, and Content Type are the base information needed for every embedded configuration.
Tip: Information and Help Icons
Throughout the form to edit or create an embedding configuration are information icons (
) that reveal tips and extra info for many fields. There are also help icons (
) that link you back to this page for reference.
- Name - An internal identifier to help you return to edit a configuration
- Target ID - This should be the CSS ID you want used in the div that will surround the embedded code
- Example: If you use "25LiveContent," your resulting script will output, <div id="25LiveContent">
- Content Type - Choose which content you want to embed:
- Availability Daily
- Availability Weekly (for a single item)
- Availability Weekly Multi-Location (based on search results)
- Calendar
- Event Form
- Express Form
- Event Details List (based on search results)
Image: Example of the output of an Event Detail List grouped weekly with selected event values displayed.
Content Fields Per Content Type
The content fields differ according to which Content Type is chosen.
- Availability Daily
- Availability Weekly & Availability Weekly Multi-Location
- Calendar
- Event Details List
- Contact & Session ID
Availability Daily
Image: Selecting Availability Daily populates multiple options
- Item Type - You can display Locations and Resources for Availability grids, while Calendars also allow Events and Organizations
- Choose to Display - Choose whether showing availability or calendar for a Single Item or for saved Search Results
- Example: Availability for a single location or resource; Calendar of events for a location, events search, or associated organization
- Item ID - If using a single item, enter the ID you retrieved from your 25Live URL when looking at the item's details view (see prerequisite instructions above)
- Query ID - If displaying by search results, enter the ID you retrieved from your 25Live URL after running a saved search (see prerequisite instructions above)
- (for event details lists or calendars and availability grids using search results)
Search Selector - Checking this option will provide you with a list of saved searches (only those your 25Live user has access to) for the chosen Item Type. You can check which you'd like to make available in the embedded content (see example). Choose between two styles of display for the search list:- Multi-Search Selector - Allows the user to show more than one search result
- Single Search Selector
Image: Using a Single Search Selector with a dropdown menu.
- Allow Event Creation - Choose whether to allow event creation links to display within the embedded content as they do in 25Live if embedding a calendar or availability grid
- Require Login For Event Creation (only appears after checking the above box) - Check to require login for event creation, the user logging in will see their security group's Event Form configuration, and that user must have permissions to create events. The associated user will be listed in the Requestor role for any new events
- Reminder: If you don't require login, the associated user you created for embedding content will be listed in the Requestor role for any new events, and that user must have permission to create events.
- If your institution uses Single Sign-On for authentication, you should remind users to close their browser to log out of all sessions.
- Event Form Config - Choose a default Event Form configuration to display regardless of the configuration associated with the logged in user's security group
Availability Weekly & Availability Weekly Multi-Location
- Item Type - You can display Locations and Resources for Availability grids, while Calendars also allow Events and Organizations
- Choose to Display - Choose whether showing availability or calendar for a Single Item or for saved Search Results
- Example: Availability for a single location or resource; Calendar of events for a location, events search, or associated organization
- Item ID - If using a single item, enter the ID you retrieved from your 25Live URL when looking at the item's details view (see prerequisite instructions above)
- Query ID - If displaying by search results, enter the ID you retrieved from your 25Live URL after running a saved search (see prerequisite instructions above)
Image: Using a multi-search selector with checkboxes in an embedded calendar.
- (for event details lists or calendars and availability grids using search results)
Search Selector - Checking this option will provide you with a list of saved searches (only those your 25Live user has access to) for the chosen Item Type. You can check which you'd like to make available in the embedded content (see example). Choose between two styles of display for the search list:- Multi-Search Selector - Allows the user to show more than one search result
- Single Search Selector
- Allow Event Creation - Choose whether to allow event creation links to display within the embedded content as they do in 25Live if embedding a calendar or availability grid
- Require Login For Event Creation (only appears after checking the above box) - Check to require login for event creation, the user logging in will see their security group's Event Form configuration, and the associated user will be listed in the Requestor role for any new events
- Reminder: If you don't require login, the associated user you created for embedding content will be listed in the Requestor role for any new events
- If your institution uses Single Sign-On for authentication, you should remind users to close their browser to log out of all sessions.
- Event Form Config - Choose a default Event Form configuration to display regardless of the configuration associated with the logged-in user's security group
Calendar
- Item Type - You can display Locations and Resources for Availability grids, while Calendars also allow Events and Organizations
- Choose to Display - Choose whether showing availability or calendar for a Single Item or for saved Search Results
- Example: Availability for a single location or resource; Calendar of events for a location, events search, or associated organization
- Item ID - If using a single item, enter the ID you retrieved from your 25Live URL when looking at the item's details view (see prerequisite instructions above)
- Query ID - If displaying by search results, enter the ID you retrieved from your 25Live URL after running a saved search (see prerequisite instructions above)
Image: Using a multi-search selector with checkboxes in an embedded calendar.
- (for event details lists or calendars and availability grids using search results)
Search Selector - Checking this option will provide you with a list of saved searches (only those your 25Live user has access to) for the chosen Item Type. You can check which you'd like to make available in the embedded content (see example). Choose between two styles of display for the search list:- Multi-Search Selector - Allows the user to show more than one search result
- Single Search Selector
Image: Using a Single Search Selector with a dropdown menu.
- Allow Event Creation - Choose whether to allow event creation links to display within the embedded content as they do in 25Live if embedding a calendar or availability grid
- Require Login For Event Creation (only appears after checking the above box) - Check to require login for event creation, the user logging in will see their security group's Event Form configuration, and the associated user will be listed in the Requestor role for any new events
- Reminder: If you don't require login, the associated user you created for embedding content will be listed in the Requestor role for any new events
- If your institution uses Single Sign-On for authentication, you should remind users to close their browser to log out of all sessions.
- Event Form Config - Choose a default Event Form configuration to display regardless of the configuration associated with the logged in user's security group
Event Details List
- Item Type - You can display Locations and Resources for Availability grids, while Calendars also allow Events and Organizations
- Query ID - If displaying by search results, enter the ID you retrieved from your 25Live URL after running a saved search (see prerequisite instructions above)
Image: Using a multi-search selector with checkboxes in an embedded calendar.
- (for event details lists or calendars and availability grids using search results)
Search Selector - Checking this option will provide you with a list of saved searches (only those your 25Live user has access to) for the chosen Item Type. You can check which you'd like to make available in the embedded content (see example). Choose between two styles of display for the search list:- Multi-Search Selector - Allows the user to show more than one search result
- Single Search Selector
Image: Using a Single Search Selector with a dropdown menu.
- Require Login For Event Creation (only appears after checking the above box) - Check to require login for event creation, the user logging in will see their security group's Event Form configuration, and the associated user will be listed in the Requestor role for any new events
- Reminder: If you don't require login, the associated user you created for embedding content will be listed in the Requestor role for any new events
- If your institution uses Single Sign-On for authentication, you should remind users to close their browser to log out of all sessions.
- Event Form Config - Choose a default Event Form configuration to display regardless of the configuration associated with the logged in user's security group
Image: Check the Show Subscribe Option to include subscription options in the list. - Subscribe - check the Show Subscribe Option box to display an "Add to Calendar" and/or feed subscription options (if configured) in the event details
Grouping - choose whether to group the events from your query by day, week, or month
Group Date Format - select from among many date formats for displaying the group
Element Date Format - select a date format for each element
Elements - check the Include box to display any of the following event field values:
- Event Name
- Sponsor
- Description
- Event Title
- Registered
- Locations
Image: Elements fields for the Event Details List.
- Additional Elements:
- Event Start
- Description
- Event End
- Setup
- Takedown
- State
- Expected
Each of the elements fields allows you to customize the label that will display and offer other fields to configure.
Tip: Reordering List Elements
You can also drag and drop the list elements to change the order they will display in the embedded content. Use the drag-and-drop handle icon (
) to move an item in the list order.
Contact and Session Fields (for all content types)
Image: Choose a contact to create a Session ID.
These fields are optional under specific circumstances.
Read more tips about using a session ID.
Open the Session Contact search dropdown menu to select a starred contact or start typing a contact name to select.
After selecting the contact, use the Create button to generate the unique Session ID needed to generate the embed code. You should not edit the Session ID.
Tip: Some Sections Are Collapsible
Image: use the chevron icons to expand or collapse sections.
If you don’t see the content you expect to see, look for the chevron icon (
) on the right side to expand the section. Use the same control to collapse a section to simplify your view.
Adding Custom CSS
See Customizing Embedded Content Styles for more information.
Image: You can target specific embedded content to style with CSS.
You can enter Custom CSS styles to apply to your embedded content to match elements such as fonts and colors to your institution's website. See Best Practices: Customizing Embedded 25Live Content Using CSS (Series25 Customer Resources login required) for common examples.
Image: Some content types offer the Form Mode CSS generator option.
Some content types also offer an option to use a CSS generator with Form Mode. See Customizing Embedded Content Styles for more information.
4. Preview Your Work
Use the Preview button to open a new tab and see your embedded content as it will appear when you add it to another page.
You can share this URL with others for collaboration and review purposes, but if you make any changes to your configuration then you will need to use the Preview button again to get a new URL.
5. Copy the Generated Embed Code to the Body of Your Page (if new config)
Use the Save button to save the configuration and generate the code you will insert in your webpage.
Copy and paste the generated code within the <body> tag of your HTML (or the equivalent if using a CMS). If you edit a configuration, this code will not change, and you do not have to copy it again to insert into your web page.
Image: Example of generated code within the boy of a simple HTML page.
6. Test Your Embedded Content
After you have saved and/or published your HTML, open your browser to the page. It may be helpful to clear your browser cache and refresh content.
Troubleshooting
If the embedded content isn’t displayed or is not showing what you expect:
- Make sure you selected the right contact
- Check that you added the correct Item ID, Search ID, and content option
- Look at the source code in your browser to be sure that:
- The initial script is in the head of the resulting HTML source
- Your content code is in the desired place within the body of the HTML
Tip: Turning off Settings to Block Third-Party Cookies
If you have a user that continues to have trouble with an embedded Event Form or Express Scheduling form, advising them to turn off blocking of third-party cookies in their browser can sometimes resolve issues.
Example Pages
Note: New examples with custom CSS are coming soon.
- Availability Daily:
- Created from Query: https://www.applyweb.com/25livedemo1/availability.html
- Created from Item: https://www.applyweb.com/25livedemo1/availability-item.html
- Availability Weekly:
- Created from Query: https://www.applyweb.com/25livedemo1/availability-weekly.html
- Created from Item: https://www.applyweb.com/25livedemo1/availability-weekly1.html
- Calendar:
- Created from Query: https://www.applyweb.com/25livedemo1/calendar.html
- Created from Item: https://www.applyweb.com/25livedemo1/calendar-item.html
- Event Details List