JavaScript Customization

5min

Regpack loads on your website when you embed the iframe code, and populates with the default properties. Although this will serve most needs, you are able to fine-tune this behavior further using JavaScript to control when the system populates, and what project settings are active on this load instance.

On parameters include a wildcard * you are expected to replace the wildcard with the form id. This enables you to call your own function after a specific form event.

The parameters are explained below, followed by a motivating example.

Parameters

Name

Type

Required

Description

group_id

numeric

true

This is the id of the project which you would like to load.

token



string

false

This is a one time authentication method for a user. In order to create the token, use login in the users endpoint on the server side.

_form_id

numeric

false

The id of the form which you'd like to load on the initial system population. Note that if you're selecting a form that requires the user to be logged in, you must supply token. All anonymous forms do not require token.

rp_holder

string

false

The id of the HTML element you want the Regpack system to populate in. Note that the system will generate an iframe inside of that HTML element.

The default id the system looks for is regpack_iframe_container.

form_submit_*



function

false

This allows you to create your own function that is called when a specific form submits. A form is designated by it's id, such as form_submit_2514736. The system will send the form response object as the first parameter of the function.

form_load_*

function

false

Same as form_submit_*, except that it is called when a form loads and no parameters are passed over. This is generally used when you want to redirect the user.

hide_top_bar

logical

false

The top bar shows additional details to the applicant, including a section to edit credentials, to navigate to the dashboard, and a progress bar that allows them to navigate through forms. The default for this is false (i.e. to show it), but the default can be switched in the project settings. Usage here will override any defaults, so true would hide the top bar.

registration_open

logical

false

If false, prevents new applicants from creating an account. This defaults to true, and like in hide_top_bar the settings can be given a new default in the project settings. Any usage here will then override that default.

Motivating example

In this example, as will be the case in most applications of the API, actions from the user endpoint will need to be collected server-side and then passed into the JavaScript. The reason why this must occur server-side is to maintain the security of your information. For instance if you made the login call in the in-line script below, that would necessitate exposing your API-admin credentials. 

For this example, while the potential for customization is extensive, the basic idea is pretty straightforward:

• Load the Regpack iframe JS file

Below is a pared down version of the iframe code.

HTML


• Set variables and initiate the iframe

In words, the script below will...

  • Begin the inline script
  • Server side, you will be responsible for using login at the users endpoint in order to get token, which you pass in to your JavaScript in order to authenticate the user.
  • Load project 1234567 (section starting with Let rp_vars)
  • Hide the top bar
  • Authenticate the user
  • Prevent them from creating a new user
  • Load form 2514736
  • Once that form is submitted call a custom function ("Yay, form submitted")
  • And the final line is init, which inititializes the global variable REGPACK.
HTML/JavaScript




Updated 03 Mar 2023
Doc contributor
Did this page help you?