FAQ content

Tutorials: Preview and share tutorials

In this article

Preview a tutorial

While viewing your tutorial in Preview Mode, you can:

  • See how your tutorial will look to the public, including your welcome screen, slides, form fields, question page breaks, and thank you screen.
    • Embedded tutorials will not display exactly as they will when they have been embedded on a web page, but the preview will allow you to see close to what it will look like.
  • Try out correct/wrong answer text, field rules, file uploads, and other features.
  • Test out look & feel, visibility, password, and other settings.
  • Submit your tutorial and test out grading & email notifications.
  • Review your test submissions. While in Preview Mode, all submissions will be separated from your users' submission data.

Launch Preview Mode

​When editing your tutorial, click on the blue Preview link at the top of the page.

  1. If you click on the preview button above the Slide Area, the preview will start at the beginning of your tutorial. This will either be your welcome screen (if customized), or the first slide.
The Preview button above the Slide Area
  1. If you click on the preview button above the Slide Workpad (i.e. when editing an individual slide), the preview will start at that slide.
The Preview button above the Slide Workpad

Preview Mode features

When in Preview Mode, a green navigation bar will appear over the top of your tutorial. This not only lets you know you're in Preview Mode, but it also provides you with several options.

  1. To navigate quickly between tutorial slides, click the Jump to Slide button and select a slide from the dropdown.
  2. Under the Options dropdown, you can choose to:
    • Ignore Required questions. Selecting this option will allow you to submit your tutorial without having to fill in required fields.
    • Show Hidden Fields. Selecting the option will allow you to view hidden fields, which is helpful if you have field rules in place.
  3. Click the Share/URL button to view your tutorial's embed code and public URL.
  4. Toggle between the Desktop View, Tablet View, and Mobile View display options to preview what your form will look like on various screen sizes/devices.
  5. Click the Preview Mode Reports button to view and analyze all of submissions made while in Preview Mode.
    • All submissions made in Preview Mode are kept in a separate list in your tutorial's reports.
    • You can use all of the same analysis reports on your preview data as you can your real data.
  6. Click on the close (close) button to exit Preview Mode. This will take you to the public view of your tutorial.
A tutorial in Preview Mode

[Return to top]


Share a standalone tutorial

When you're ready to start gathering submissions, there are a couple of ways you can share your standalone tutorial:

  • Visiting the tutorial's URL: each tutorial also has its own standalone URL, which you can use to view it directly in your browser. This is great for sharing a link to a tutorial in an email -- especially if you have given your tutorial a friendly URL.
  • Launching the tutorial from a button widget: each tutorial has its own embed code which allows you to launch your tutorial by clicking a customizable button. This will open the full tutorial in a new window.

View a standalone tutorial's sharing options

There are three ways you can find your standalone tutorial's embed code and URL:

Via the workpad
  1. Click on the Share / URL button above the Slide Area.
The Share / URL button
Via the Tutorials page
  1. Click on Tutorials in the command bar.
  2. For the tutorial you want to share, click on the Form Code () icon in the URL/Code column.
Viewing a form's embed code from the Tutorials page
Via the Widget Settings & Code panel
  1. While editing your tutorial, under the Tutorial Options tab, click on the Widget Settings & Code panel to expand it.
  2. Click the Generate Widget Code button to view the code for your widget.
copying the widget code from the widget settings panel

Sharing options

Direct/Friendly URL

Each standalone tutorial has its own unique, customizable URL which you can share with patrons. By default, this URL consists of a unique ID number that isn't very memorable (known as the Direct URL). However, you can replace that number with your own custom URL slug, referred to as a Friendly URL.

To easily view and copy your standalone tutorial's current URL, look no further than the Direct URL/Friendly URL field in the Standalone Tutorial/Assessment widget code window.

share a standalone tutorial's URL
Popup via Button

As an alternative to linking to the tutorial, you can embed a button that launches it inside of a window. When using this option, you will be provided with some embed code to insert into your page's HTML.

When you embed a standalone tutorial widget in a webpage, it will display as a tab along the side of the page. Clicking that tab will launch the entire tutorial in a new window.

Example of a standalone widget
Example of a standalone tutorial's widget

If you don't need to make any changes to the display of the button widget: 

  1. Click inside the blue text area containing your widget's HTML code in the Standalone Tutorial/Assessment widget code window. This will automatically copy it to your clipboard.
    1. If your tutorial currently has a page header or banner, you can choose to exclude it from the widget by selecting the Do NOT Display Banner Header checkbox.
share a standalone tutorial's unedited button widget

Alternatively, if you would like to adjust the widget's display before copying the embed code:

  1. While editing your tutorial, under the Tutorial Options tab, click on the Widget Settings & Code panel to expand it.
  2. Use the Button Text field to customize the button's label.
  3. To customize the positioning of the button along the edge of the page, enter an value in the Button Vertical Position field, either in pixels (e.g. 300px) or a percentage (e.g. 30%).
    • The amount you enter will determine the position relative to the selected Button Location option.
    • For example, if you choose Left or Right, then the position will be relative to the top of the page.
  4. Use the Button Location option to select which side of the screen to display the button (i.e. left, right, top, or bottom).
    • Use the Button Vertical Position option to adjust the button's position along that side.
  5. To customize the text color of the button, use the Button Text Color setting. Either click in the field to use a color picker, or enter the color's HEX code.
  6. To customize the background color of the button, use the Button Background Color setting. Either click in the field to use a color picker, or enter the color's HEX code.
  7. Click the Generate Widget Code button to view the code for your widget.
Widget Settings & Code options
  1. If your tutorial currently has a page header or banner, you can choose to exclude it from the widget by selecting the Do NOT Display Banner Header checkbox.
  2. Click inside the blue text area containing your widget's HTML code. This will automatically copy it to your clipboard.
share a standalone tutorial's edited button widget

[Return to top]


Share an embedded tutorial

Embedded tutorials are intended to be displayed on top of an existing website. Each embedded tutorial you create will have its own embed code that you can add to your site, LibGuide, catalog, research databases, or really anywhere that allows you to add custom code.

Unlike standalone tutorials, which contain individual slides with content embedded inside, embedded tutorials instead overlay information and questions right on top of the actual site. Users can launch the tutorial content by clicking on a button that appears on the side of the screen. This allows users to complete the tutorial without having to navigate to a separate URL, which is great if you want to give them a quick how-to manual.

(Please note: if you have enabled the LIbAuth Authentication access control for your tutorial, your authentication log-in page may not be allowed to display inside of <iframe> elements. As a result, the form may not display inside of the window.)

Example of an embedded tutorial
Example of an embedded tutorial

View an embedded tutorial's HTML embed code

When you're ready to start gathering submissions, there are three you can find the HTML embed code for your embedded tutorial:

Via the workpad
  1. Click on the Share / URL button above the Slide Area.
The Share / URL button

From the Embedded Tutorial/Assessment widget code window you then can:

  1. Use the Do NOT Display Banner Header option to create a widget without the tutorial's header.
  2. Click inside the Embed Widget Code text area and the HTML embed code will automatically be copied to your clipboard.
  3. Click the Preview Widget button to view a live example of the widget. This will launch the widget over the website or LibGuide set as your tutorial slide's content, allowing you to fully interact with the widget before you embed it on your website.
    • Please note: if you have enabled the LIbAuth Authentication access control for your tutorial, your authentication log-in page may not be allowed to display inside of <iframe> elements. As a result, the form may not display inside of the window.

Viewing a tutorial's embed code
Via the Tutorials page
  1. Click on Tutorials in the command bar.
  2. For the tutorial you want to share, click on the Form Code () icon in the URL/Code column.
Viewing a form's embed code from the Tutorials page

From the Embedded Tutorial/Assessment widget code window you then can:

  1. Use the Do NOT Display Banner Header option to create a widget without the tutorial's header.
  2. Click inside the Embed Widget Code text area and the HTML embed code will automatically be copied to your clipboard.
  3. Click the Preview Widget button to view a live example of the widget. This will launch the widget over the website or LibGuide set as your tutorial slide's content, allowing you to fully interact with the widget before you embed it on your website.
    • Please note: if you have enabled the LIbAuth Authentication access control for your tutorial, your authentication log-in page may not be allowed to display inside of <iframe> elements. As a result, the form may not display inside of the window.

Viewing a tutorial's embed code
Via the Widget Settings & Code panel

If you would like to adjust the widget's display before copying the embed code, you can using this option:

  1. While editing your tutorial, under the Tutorial Options tab, click on the Widget Settings & Code panel to expand it.
  2. Use the Button Text field to customize the button's label.
  3. To customize the positioning of the button along the edge of the page, enter an value in the Button Vertical Position field, either in pixels (e.g. 300px) or a percentage (e.g. 30%).
    • The amount you enter will determine the position relative to the selected Button Location option.
    • For example, if you choose Left or Right, then the position will be relative to the top of the page.
  4. Use the Button Location option to select which side of the screen to display the button (i.e. left, right, top, or bottom).
    • Use the Button Vertical Position option to adjust the button's position along that side.
  5. To customize the text color of the button, use the Button Text Color setting. Either click in the field to use a color picker, or enter the color's HEX code.
  6. To customize the background color of the button, use the Button Background Color setting. Either click in the field to use a color picker, or enter the color's HEX code.
  7. If you would like the widget to pop up automatically when the page loads, select the Launch widget on page load checkbox. Otherwise, users will have to click the widget tab to launch it.
  8. Click the Generate Widget Code button to view the code for your widget.
    1. Optionally, click the Preview Widget button to launch an example of the widget in a new window.
Widget Settings & Code options

[Return to top]