Creating an in-page iframe widget

In-page IFrame widgets allow you to embed a dataset's data entry form into just about any webpage, such as a LibGuide (using a Media/Widget asset) or your library website. The steps below will guide you through creating and customizing your widgets. When finished, just copy and paste the provided HTML embed code into the HTML code of your webpage where you want it to appear. 

  1. From the command bar, go to Admin > Widgets & APIs.
  2. Click on the Create Widget button.
  3. On the New Widget modal, select the dataset you want to use from the Select Dataset dropdown. You can pick from any of your Custom, Shared, or Gate Count datasets.
  4. Give your widget a descriptive name. Optionally, you can select the checkbox to use that as the widget's heading instead of the dataset's name.
  5. From the Display Type dropdown, select In-page IFrame.
  6. Select the intended Audience for this widget.
    • Public - this will allow anyone to record data using this widget. No login is required.
    • Account Holders - this will only allow users with LibInsight accounts to record data using this widget. Users will be prompted to log in before adding data if they are not already logged into LibInsight.
  7. For Custom and Shared datasets, use the Show System Fields field to show or hide the time/date stamp, internal notes, and entered by fields. You can also customize the labels for those fields as they appear in the widget, too.
    • Note: If this widget is for a Gate Count dataset, you will see a Select Library field  here to choose which library you want to record data to.
  8. For Custom and Shared datasets, you can use the Layout option to display the fields in a single column, or using the original field layout in the dataset's settings.
  9. For Custom and Shared datasets, you can choose to hide certain fields from with widget with the Exclude Fields list. To select multiple fields, press CTRL and click on each field.
  10. For Custom and Shared datasets, you can choose which Submit Buttons to display:
    • Submit + Reset - this will display a Submit button and a Reset button. When a user clicks Submit, this will record the data, but not clear the form.
    • Submit + Submit & Clear - in addition to a Submit button, this will display a Submit & Clear button. When a user clicks Submit & Clear, it will submit their record and clear their entries from the form.
  11. Click Save.

Navigating to the Widgets and APIs page

creating an inpage iframe widget


Optional Settings

When building a widget, there are also a collection of additional settings that can be configured on the Optional Settings tab of the New Widget modal. Those settings include:

  1. Intro Text: Optional text that appears above the dataset form.
  2. Thank You Msg: Customize the confirmation message that displays after submitting the form.
  3. Show Data?: Display a summary of the submission when enabled.
  4. Email Notify: Enter any email addresses (separated with a comma) that should be notified when a new submission is made.
  5. Custom CSS: If you would like to customize the styles for your widget, add your CSS rules here. When adding your CSS rules, do not enclose them in <style></style> tags.
  6. On Page Load?: When enabled, the widget pop-up will open on the loading of the page.

Overview of the optional settings when creating a widget


Embedding iframe widgets

In-page iframe widgets allow you to embed the entire data entry form onto a webpage. Although you can embed these just about anywhere, try to place them in spots that aren't too cramped. Forms that have a lot of fields will require users to scroll if they don't have enough space.

  1. On the Widgets and APIs page, click on the View Widget Code () icon in the Actions column for the widget you want to embed.
  2. Copy and paste the provided code into your webpage in the location where you want the form to display.

Screenshot of the View Widget Code button

Example of an iframe's widget code

Related Articles