There are two ways to share a Web Form publicly:

1. Link - A Public URL that is hosted by Merchant Central that can be inserted into your website and users are redirected to new page where they view and complete the form. 
2. Embedded - Allows you to embed the same form within your own website using one of our 3 embed options so users aren't redirected away from your site. 

Link Share Option

The main settings for sharing a link are Name and Public URL (a slug for the unique form link). Public URL is auto-generated based on the Name, and can be manually adjusted on demand. 

After the configuration is saved, the system provides a URL such as your_merchant_central.com/form/public-mfa, that you can copy and paste as a hyperlink to share with your merchants or add on your website. 

Embedded Share Option

For a quick walkthrough of how to create a Simple iFrame Embedded Web Form, watch the video below, or continue reading for a detailed explanation of the embed types and additional links for managing your embedded forms.

Embedded Web Forms allow you to insert your form into an existing web page, such as your company's website, so it appears as if it's native to the site to make it easier for users to fill out.

Embedded forms also offer additional branding and customization options so the form matches the style of the website where you've embedded the form for a seamless integration and user interface.

Unlike the Link share option described above, embedded won't have a URL since it's not redirecting users to another page, it will be directly integrated into the site you've chosen. 

Note: Pay attention to the Domains field. You must provide all of the domain names where your embed script with be inserted, otherwise it won't load. 

The Preview button allows you to review the style changes applied on the Embedded Web Form Settings sections before creating or updating the share option. 

After you click Save & Generate Embed Code, the embed script options will be displayed:

Note: Style/logo configurations from the Share Form modals under the Embedded Web Form Settings section affect ALL of the embed formats. 

Embed Formats

Simple <iFrame>

This is the common iFrame HTML tag, and as stated, the simplest embed option.

This option can be used when you don't need extra control over the form styles beyond what is offered in the Embedded Web Form Settings when creating an embedded share option.

This is the most straightforward and easiest embed option that requires the least technical skill. Copy the generated code from the modal and insert into your website code where you want the form to be displayed. 

Dynamic <iFrame>

Very similar to the Simple <iFrame> option, but with enhanced functionality that offers more control over form events.

For example, if you want to know when a form is loaded, leverage the onLoaded event.

Or, if you'd like to perform a specific action on your site after the form is submitted, you can use onSubmitted (form submission triggered), or onFormFinished (either form submission or if E-Sign is enabled on the form, the step after E-Sign is signed) to trigger the action. 

See Embed Form Events documentation for more information on events. 

JS Widget <script>

JS widget provides the most flexible embedded form functionality that natively integrates into your site's HTML - no scroll box or fixed height, unlike iFrame.

Similarly to Dynamic <iFrame>, you have control over events. Additionally, there is also an options object where you can override the form styles. The options are considered an extended version of Embedded Web Form Settings styles that you configured when creating/updating the share type in the Manage Web Forms page. 

See our Web Form Script documentation for detailed information on options and events. 

Embed Script Style Options

JS Widget <script> embed alternative provides a simple interface that groups related CSS styles into easy-to-use properties.

For instance, if you need to update all of the input fields' dropdown height, use inputHeight to change them all at once.

Or, if the font size doesn't for your website design, you can adjust the fontSize property and it will calculate all of the other element font sizes accordingly. See the full list of properties below:

Script Example

<script>  (async function (w,d,s,o,f,cf,js,fjs) {  w['WF-Widget'] = o; cf = { org: new URL(f).origin, ...cf };  w[o] = w[o] || function () { (w[o].q = w[o].q || []).push([...arguments, cf]) };  const el = !d.getElementById('wf-widget') && Object.assign(document.createElement('div'), { id: 'wf-widget' });  el && d.currentScript.parentNode.insertBefore(el, d.currentScript)  js = d.createElement(s), fjs = d.getElementsByTagName(s)[0]; const fc = await fetch(f).then(r => r.json());  cf.bnd = fc?.url; js.id = o; js.src = fc?.url; js.async = 1; fjs.parentNode.insertBefore(js, fjs);  }(window, document, 'script', 'wf', 'https://example.com/web-form/bundle', { lf: false }));  wf('init', {  elementId: "wf-widget",  id: '19c70afd-7f7b-4286-a9fd-f68ba25b7caf',  options: {  hideHeader: false,  headerBackgroundColor: '#1d2f42',  primaryColor: '#429fe8',  secondaryColor: 'white',  fontColor: '#333333',  webformBackgroundColor: '#eaedf2',  sectionBackgroundColor: '#ffffff',  fontType: 'Lato',  fontSize: 'initial',  buttonColor: 'initial',  buttonTextColor: 'initial',  buttonHoverColor: 'initial',  buttonHoverTextColor: 'initial',  inputHeight: 'initial',  buttonHeight: 'initial',  inputBorderColor: 'initial'  },  events: {}  }); </script>