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 the New Configurations
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. For Embedding Event Forms and Express Scheduling, A Security Group and User With Proper Permissions Set
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.
Each of these groups should contain new contacts created just for embedding content. Add a new contact with the Series25 Group Administration tool.
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. Choose a 25Live Contact (for Event Forms and Express Forms)
Image: You can find the existing Event Form Configurations in Config Settings under Event Form Settings.
All types of embedded content require you to choose a 25Live contact to associate with the content.
If you are embedding an Event Form or Express Scheduling form, 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.
Tip: You Can Create Special Configurations To Embed
The flexibility provided by 25Live to create an unlimited number of Event Form configurations allows you to take advantage of the options to customize form field names, require certain fields, require certain custom attributes, or hide any fields or options you wish. You can create and edit configurations in the Event Form Settings section of System Settings, and you can also adjust more settings for help or hiding elements in the same view of 25Live Pro.
You can also take advantage of using different Event Form configurations by requiring any user to login to use embedded Event Forms, as described in the steps below.
Your resulting setup should look something like the chart example.
Image: Example of the flow of setup for embedding Event Form content.
4. Set Up Locations For Express Scheduling
Each location you would like to allow use with Express Scheduling must be configured individually in 25Live. Administrators can see the Setting up Locations for Express Scheduling (Customer Resources login required) for more on how to configure locations to be available for Express Scheduling.
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 embedding an Event Form, Express Scheduling form, or 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 Event Forms and Express Scheduling: Proper association of a new or existing user with the desired Event Form configuration for their security group
- User(s)
- For Event Forms and Express Scheduling: Proper association of a new or existing user with the desired Event Form configuration for their security group
Getting to the Embedding Section
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.
Under Navigate to... select System Settings.
Image: Access the System Settings from the 25Live More menu
Next, go to the Embedding tab.
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 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)
Content Fields
The content fields differ according to which Content Type is chosen.
Event Form
Image: Event Form embedded content fields include an option to choose a configuration.
- Event Creation - Require Login For Event Creation - Check to require login for event creation, the user logging in will see their security group's Event Form configuration unless a different configuration is specified below, 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
Express Form
Image: Express Form embedded content fields include an option to choose a configuration.
- Event Creation - Require Login For Event Creation - Check to require login for event creation, the user logging in will see their security group's Event Form configuration unless a different configuration is specified below, 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
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.
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)
Image: Upon saving, the code needed to insert within the body of your page will appear.
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 body 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.
- Event Form:
- Express Scheduling