In This Article

Creating a side button widget

  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 Side Button.
  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 a side button 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 side button widgets

Each side button widget you create will have its own code you can use to embed it in a LibGuide or other webpage. The provided code will allow you to create a button that displays on the right side of the screen. When clicked, it will display a window containing the widget's data entry form.

  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 three lines of code into your webpage.
    1. Try to place the first <script> element before the </head> tag on your page. If this is a LibGuide, your site or guide's custom JS/CSS code is a good spot.
    2. Try to place the second <script> element at the very end of your page, just before the </body> tag. However, if you can't easily do this (or are putting this on a LibGuide), then try to place it after the widget's <div> element.
    3. Place the <div> element somewhere in the <body> of your page. This is turned into the side tab itself, so it won't display in the exact spot you place it.

Screenshot of the View Widget Code button

Example of a side button widget's embed code 

Related Articles

    Nav Menu Script