Embedding 25Live Pro Event Forms and Express Scheduling Forms

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

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)

Event Form Settings in System SettingsImage: 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 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.

Example of the flow of setup for embedding Event Form content.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 the 25Live Administration Utility. 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)

Getting to the Embedding Section

The More menu in the top navigation barImage: 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 menuImage: 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 SettingsImage: 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 instructionsImage: 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.

HTML exampleImage: 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

Select or Create ConfigurationImage: 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 fieldsImage: 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)

Content Fields

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

Event Form

Event Form content fieldsImage: 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 fieldsImage: 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)

Contact fieldsImage: You should choose a contact to create a session ID that will be used.

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.

Custom CSS fieldImage: 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 ModeImage: 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 savingImage: 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 codeImage: 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.