Page tree
Skip to end of metadata
Go to start of metadata

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.


Prerequisites: Gathering What You Need to Embed Content

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

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 the 25Live Administration Utility, go to the Contacts tab to create new contacts. 

Adding new contact in Administration Utility
Image: Example of a new user with a descriptive name associated with a new security group.

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

25Live Administration Utility Help

3. Get a Saved Search or Item ID (for Calendars and Grids)

Saved Search (Query) ID

Embedding calendars, availability grids by 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.

Finding search ID in URL
Image: The search ID is in the URL of your browser when viewing a search in 25Live.

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.

Pointing out item ID in URL
Image: The Location's item ID is in the URL of your browser when viewing a location's details in 25Live.

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 Event Forms and Express Forms)


Image: You can find the name of the Event Form configuration from the Event Form Settings section of System Settings when logged in as an administrator.

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, or 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.

5. Set Up Locations For Express Scheduling

Each location you would like to allow use with Express Scheduling must be configured individually in the 25Live Administration Utility. Administrators can see the How To Use Express Scheduling in 25Live (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 calendars, availability grids, and event details lists: A saved search ID or item ID
    • 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) should also be set up if you intend to allow event creation from calendars or availability grids.

Getting to the Embedding Section

The More menu in the top navigation bar
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.

System Settings link in More menu
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.

Embedding section in System Settings
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

First step instructions
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).

HTML example
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

Select or Create Configuration
Image: The dropdown menu will allow selection of an existing config, or use the Create New Config button.

As outlined in the second step of the embedding page, you can select an existing configuration or use the Create New 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

Name and Target ID fields
Image: The Name, Target ID, and Content Type are the base information needed for every embed config.

Tip: Information and Help Icons

Throughout the form to edit or create an embedding configuration are information icons (Info icon) that reveal tips and extra info for many fields. There are also help icons (Help icon) 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 Details List grouped weekly with selected event values displayed.

Content Fields

The content fields differ according to which Content Type is chosen.

Availability Daily

Dynamic content fields animation
Image: The middle fields dynamically change to reveal the details needed for availability grids and calendars.

  • 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: The Search Selector using a Single Search Selector with 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
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)

Multi-search in a calendar
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)

Multi-search in a calendar
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: The Search Selector using a Single Search Selector with 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 Form

Event Form content fields
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

Express Form content fields
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
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)

Multi-search in a calendar
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: The Search Selector using a Single Search Selector with 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

Event Details List Subscription option
Image: Check the Show Subscribe Option box 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

First special fields for event list details
Image: The Event Details Listing content type has a number of special fields to select.

  • 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

More Event List Details fields
Image: The Elements Event Details List fields are within a collapsible display.

  • Elements - check the Include box to display any of the following event field values:

    • Event Name
    • Sponsor
    • Description
    • Event Title
    • Registered
    • Locations

More Event Details List fields
Image: More Elements fields for the Event Details List embedded option appear as you scroll down.

  • Additional Elements: 
    • Event Start
    • Description
    • Event End
    • Setup
    • Takedown
    • State
    • Expected

Each of the elements fields allow you to customize the label that will display and offer other fields to configure.

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)

Contact fields
Image: You must choose a contact to create a session ID that will be used.

Reminder: You need a contact/group for embedding event and express forms, however, if embedding calendars or availability grids, you can leave the contact field blank to have the views default to using your 25Live Viewer Seat user.

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

Collapsed sections
Image: Use the chevron icons to expand or collapse some sections. 

If you don’t see 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.

Custom CSS field
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.

CSS Form Mode
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)

Resulting script after saving
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.

Example code
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.





Copyright © 2021 CollegeNET, Inc.  Note: This information is for CollegeNET Series25 customer use only.
Series25 Customer Resources • Terms of Use •  Privacy Policy • Learn About Series25 • Contact CollegeNET