---
title: JavaScript Customization
slug: docs/javascript-customization
docTags: 
createdAt: 2021-08-21T00:08:10.000Z
---

Regpack loads on your website when you [embed the iframe code](https://www.regpacks.com/help/project-settings/embedding-regpack/), 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`<br />         | string   | false    | This is a one time authentication method for a user.<br /><br />In order to create the token, use `login` in the users endpoint on the server side.<br />                                                                                                                                                                                                                          |
| `_form_id`            | numeric  | false    | The id of the form which you'd like to load on the initial system population.<br /><br />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.<br /><br />The default id the system looks for is `regpack_iframe_container`.                                                                                                                                                     |
| `form_submit_*`<br /> | 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`.<br /><br />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.<br /><br />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>

```

### • 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&#x20;
- Authenticate the user&#x20;
- Prevent them from creating a new user
- Load form `2514736`&#x20;
- Once that form is submitted call a custom function ("Yay, form submitted")&#x20;
- And the final line is `init`, which inititializes the global variable `REGPACK`.

:::CodeblockTabs
HTML/JavaScript

```html
<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>
```
:::