Integrate Forms to Existing Websites

   Journey Manager (JM) The transaction engine for the platform. |   Platform Developer  |  All versions This feature is related to all versions.

Manager allows you to integrate its forms to existing websites. The modern trend is for launching forms from existing websites is to open a new browser tab or window. This has a few important advantages:

• Works better on mobile devices where screen real-estate is limited
• Prevents the user from moving away from the data entry experience by clicking on links in the surrounding page
• Is simpler from an implementation perspective

You can find several integration strategies listed below:

iFrame Embedding

Form Display Mode is Embed with iFrame.

Pros

• Simple
• No "leakage" of JavaScript or CSS from parent page to form page

Cons

• Pages although appear to be integrated are actually separated causing a number of issues.
• Refreshing of the page is problematic.
• Back button does not work properly.
• Difficulties in maintaining styling with significant effort needed on BT to maintain.
• Difficult to pass control between the pages.
• Complexities in the JavaScript as the parent control needs to be passed to Manager.
• Potential responsive design issues, especially on smaller devices.

<DIV> Embedding

Form Display Mode is Embed with a DIV.

Pros

• Solves some of the problems associated with iFrames.

Cons

• Complexity around the sharing of JavaScript used to render the contents of the form into the DIV element.
• Potential for code bleed or CSS clashes
• We don't recommend this integration

Launch a new tab or window

Form Display Mode is Direct Render.

Pros

• Clean code separation
• Clear boundary of ownership
• Control easily and intuitively passed between NextGen UI and the Manager on-boarding pages
• Form access is controlled at the URL level
• Recommended by Temenos as their preferred approach with their other customers

Cons

• The form must be built with a simple header that includes a small amount of branding from the web site
• Visual design - need to be simplified in terms of shared header

Configure the Form Display Mode

The Form Display Mode is the process of embedding the form, either with a DIV or iFrame, to display the form inside a portal page, where that page typically provides the header, footer and sidebars. Direct Render displays the form using a Servlet and does not include any elements outside the form itself. For more information on the Form Display Mode setting, see form flow configuration.

Form URLs

These different methods of displaying the form mean that different URLs are used by Transact, as follows.

URL	Usage
<portal>/form.htm?formCode=<form code>	Form Page which will embed a new HTML or PDF form in the page using an IFRAME or DIV tag. The form is identified by the formCode parameter.
<portal>/secure/form.htm?formCode=<form code>	Same as above but under a secure path, which requires the user to be authenticated
<portal>/form.htm?submitKey=<submit key >	Form Page which will embed a saved HTML or PDF form in the page using an IFRAME or DIV tag. The form submission is identified by the submitKey parameter.
<portal>/form.htm?taskKey=<task key >	Form Page which will embed an assigned HTML or PDF form task in the page using an IFRAME or DIV tag. The form task is identified by the taskKey parameter.
<portal>/servlet/SmartForm.html?...	Same as above options but doing a direct render , where by the form is not being embedded in another HTML page

When a HTML form is being rendered on a mobile/tablet device (iPad, phone, etc.) it will automatically redirect to the /servlet/SmartForm.html path, even if the form is configured to be embedded in the form page. This is because embedding HTML forms does not always work well on mobile/tablet devices.

Next, learn how to view all forms.