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
<script 
type=”text/javascript” 
src=”https://www.regpack.com/reg/regpack_rp2_iframe.js?manual_trigger=true”>
</script>

<script 
type=”text/javascript” 
src=”https://www.regpack.com/reg/regpack_rp2_iframe.js?manual_trigger=true”>
</script>
﻿
• 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
<script type=”text/javascript”>

// Here i'm extracting the token from the JSON you have gotten from the login call
user_token=data["token"]



Let rp_vars={
	“group_id”: 1234567,
    “hide_top_bar”:true,
    “token”: user_token,
    “registration_open:false,
    “_form_id”:2514736,
    “form_submit_2514736”: function(){
        alert(“Yay, form submitted”);
    }
}


REGPACK.init(rp_vars);


</script>
<script type=”text/javascript”>

// Here i'm extracting the token from the JSON you have gotten from the login call
user_token=data["token"]



Let rp_vars={
	“group_id”: 1234567,
    “hide_top_bar”:true,
    “token”: user_token,
    “registration_open:false,
    “_form_id”:2514736,
    “form_submit_2514736”: function(){
        alert(“Yay, form submitted”);
    }
}


REGPACK.init(rp_vars);


</script>
﻿
﻿

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.

Updated 05 Nov 2024

Did this page help you?

Webhooks