Unbounce External Scripts for SA

Usage

To include this script on the page with your form, click Javascript at the bottom of the Editor, and click + Add New Javascript. Make sure you’re editing the page with the form.

Copy the below code and paste it in the editor.

<!-- Usage instructions are located here: https://github.com/jeremygooch/sa_unbounce/blob/master/readme.org -->
<script src="https://rawcdn.githack.com/jeremygooch/sa_unbounce/ece8bf722c0344f3ab2be7fd8ac1de9a4d5db297/lib/sa_unbounce_form.js"></script>

Change the Placement of the script to Before Body End Tag.

To use this script you need at least 2 hidden fields on the form. The ids of these must match the values below:

id	used for
Industry_Id	required for prepopulating data on page load also (i.e. crm, medical, etc). Note the capitalization.
submit_id	the id of the submit button on the page which looks like #lp-pom-button-27 (found under metadata panel)

Form Fields

Saving Data will capture the following values. The following are required for saving a conversion:

id*	Field Type	Required?	db/api value	Data types	Default Value
first_name	input	X	f_name	Text	N/A
last_name	input	X	l_name	Text	N/A
email	input	X	email	Text [email]	N/A
size_of_organization	select, radio	X	size_id	prefilled load	N/A
industry	select, radio	X	segment_id	prefilled load	N/A
software_features	select, radio, checkbox	X	modules	prefilled	N/A
phone_number	input	-	phone	Text	N/A
company_name	input	-	company	Text	N/A
form_type	input	-	type	Different form types**	multiquote

* The id can be changed for any form element by unchecking the ~Auto-generate from Field Label~ checkbox

** form_type can be any one of the following values: quote, demo, question, download, faststart, 800 call-in, introduction, video, trial, registration, multiquote, multiquote_inactive, chat, videodemo, multidemo, matches, email_matches, scheduled_call

Replacing Fields

If you do not want the user to have to complete any of the required fields, you can add them as a hidden input on the page with a default value that you determine. However, the id of the field must match the table above. For instance, if you do not want the user to have to complete the last name field, you can add it as a hidden input with the id last_name, and a default value that the database allows (i.e. -----).

Multiple Pages (i.e. Lightbox or Popup Form)

If your landing page is made up of multiple pages with the form appearing on a different page then you’ll need to include a second script. For example, if you are displaying the form in a lightbox the above script should go on the page with the form. On the main page (called Page by default in Unbounce), add the following Javascript by clicking the +Add New Javascript option in the Javascript menu.

<!-- Usage instructions are located here: https://github.com/jeremygooch/sa_unbounce/blob/master/readme.org -->
<script src="https://rawcdn.githack.com/jeremygooch/sa_unbounce/ece8bf722c0344f3ab2be7fd8ac1de9a4d5db297/lib/sa_unbounce_parent.js"></script>

Again, the Placement of the script should be Before Body End Tag.

Development

Building Locally

After setting up the project with npm i, the source code can be transpiled with npm run build. If your editor supports after-save hooks the project can be built on save. For instance, below is some elisp code to do that:

(defun sa/build-unbounce-on-save ()
  "Transpiles the unbounce project."
  (if (equal major-mode 'js-mode)
      (if (string-match-p (regexp-quote "/sa_unbounce/src/") (file-name-directory buffer-file-name))
	  (shell-command "cd ../; npm run build &")
      )))

(add-hook 'after-save-hook 'sa/build-unbounce-on-save)

If you use emacs, simply evaluate the above code and emacs will transpile your code on every save.

Future Idea for Automatic Updates

At some point we may want to introduce a precommit hook that will transpile the code. Therefore when any changes are pushed to master remotely, the contents under lib/ will be updated and any forms using these scripts will be updated automatically.

At this time these libs are simply POC therefor this feature has not been introduced.

Debugging/Development Workflow

It’s often handy to use the un-transpiled version of the code for debugging and development. The untranspiled code can be added directly into unbounce and run as long as you’re using an up-to-date web browser. Code changes can be iterated much easier in this manner.

However, once the changes are complete and ready to use in a real campaign, the untranspiled code must be swapped out with the minified version so that all of our supported browsers can run the code without issue. It’s wise to retest with the transpiled code to ensure that nothing strange was introduced before going live.