Using the GetLinked Jab Form

For a full list of configuration options, please see the Configuration Options.

Step 1: Add the Stylesheet

Before the close of the HTML head tag (</head>), add the stylesheet:

<link rel="stylesheet" href="/path/to/glj.css" media=all>

For more information about style customization, please see the styling options documentation.

Step 2: Add Form Placeholders

In your document, add an element or elements which you want to replace with the form that should be rendered. They can be as simple as:

<div class="this-will-be-replaced"></div>

To something more complex and complicated, or using custom HTML attributes like this:

<div glj-example>
    <h2>Loading...</h2>
</div>

The contents of the element being replaced will be used as the "loader overlay" when the form is processing / being submitted.

INFO

You can specify a CSS selector which catches multiple HTML elements to render multiple forms at the same time!

For more examples, see below.

Step 3: Add the Async Initializer

Before the close of the HTML body tag (</body>), add the async initializer:

<script>
  window.addEventListener('GLJ:loaded', () => {
    window.GLJ.init({
      baseUrl: 'https://server.your-getlinked-backend-domain.example',
      selector: '[some-css-selector]',
      tosDocLocation: new URL('/tos.md', window.location.href).toString(),
    })
  })
</script>

For more information about the available configuration options, please see the configuration options documentation.

Step 4: Add the SDK

Before the close of the HTML body tag (</body>) but after the async initializer, add the SDK:

<script type="text/javascript" src="/path/to/glj.js" async defer></script>

Examples

Default Configuration

Content in HTML

<div glj-example>
    <h2>Loading...</h2>
</div>

Async Initializer

window.addEventListener('GLJ:loaded', () => {
    window.GLJ.init({
        baseUrl: 'https://server.your-getlinked-backend-domain.example',
        selector: '[glj-example]',
        tosDocLocation: new URL('/tos.md', window.location.href).toString(),
        offerHash: 'some-offer-hash',
    })
})

Loading...

Shortest Possible Configuration

Content in HTML

<div glj-example>
    <h2>Loading...</h2>
</div>

Async Initializer

window.addEventListener('GLJ:loaded', () => {
    window.GLJ.init({
        baseUrl: 'https://server.your-getlinked-backend-domain.example',
        selector: '[glj-example]',
        tosDocLocation: new URL('/tos.md', window.location.href).toString(),
        offerHash: 'some-offer-hash',
        emailFieldCells: 1,
        phoneFieldCells: 1,
        tosFieldCells: 0,
    })
})

Loading...

Showing all fields

Content in HTML

<div glj-example>
    <h2>Loading...</h2>
</div>

Async Initializer

window.addEventListener('GLJ:loaded', () => {
    window.GLJ.init({
        baseUrl: 'https://server.your-getlinked-backend-domain.example',
        selector: '[glj-example]',
        tosDocLocation: new URL('/tos.md', window.location.href).toString(),
        offerHash: 'some-offer-hash',
        phoneFieldCells: 1,
        countryFieldCells: 1,
        passwordFieldCells: 1, 
        confirmPasswordFieldCells: 1,
        privacyFieldCells: 2,
    })
})

Loading...

Multiple Forms with different calls to action

Content in HTML

<div glj-example glj-call-to-action="Call to Action 1">
    <h2>Loading...</h2>
</div>
<div glj-example glj-call-to-action="Call to Action 2">
    <h2>Loading...</h2>
</div>

Async Initializer

window.addEventListener('GLJ:loaded', () => {
    window.GLJ.init({
        baseUrl: 'https://server.your-getlinked-backend-domain.example',
        selector: '[glj-example]',
        tosDocLocation: new URL('/tos.md', window.location.href).toString(),
        offerHash: 'some-offer-hash',
    })
})

Loading...

Loading...

Force only mobile phone numbers

Content in HTML

<div glj-example>
    <h2>Loading...</h2>
</div>

Async Initializer

window.addEventListener('GLJ:loaded', () => {
    window.GLJ.init({
        baseUrl: 'https://server.your-getlinked-backend-domain.example',
        selector: '[glj-example]',
        tosDocLocation: new URL('/tos.md', window.location.href).toString(),
        offerHash: 'some-offer-hash',
        phoneForceMobile: true,
    })
})

Loading...

Custom Disclaimer

Content in HTML

<div glj-example glj-disclaimer="This is a custom disclaimer">
    <h2>Loading...</h2>
</div>

Async Initializer

window.addEventListener('GLJ:loaded', () => {
    window.GLJ.init({
        baseUrl: 'https://server.your-getlinked-backend-domain.example',
        selector: '[glj-example]',
        tosDocLocation: new URL('/tos.md', window.location.href).toString(),
        offerHash: 'some-offer-hash',
    })
})

Loading...

Arabic Form

Content in HTML

<div glj-example>
    <h2>Loading...</h2>
</div>

Async Initializer

window.addEventListener('GLJ:loaded', () => {
    window.GLJ.init({
        baseUrl: 'https://server.your-getlinked-backend-domain.example',
        selector: '[glj-example]',
        tosDocLocation: new URL('/tos.md', window.location.href).toString(),
        offerHash: 'some-offer-hash',
        phoneFieldCells: 2,
        countryFieldCells: -1,
        passwordFieldCells: 1, 
        confirmPasswordFieldCells: 1,
        privacyFieldCells: 2,
        locale: 'ar',
    })
})

Loading...

German Form

Content in HTML

<div glj-example>
    <h2>Loading...</h2>
</div>

Async Initializer

window.addEventListener('GLJ:loaded', () => {
    window.GLJ.init({
        baseUrl: 'https://server.your-getlinked-backend-domain.example',
        selector: '[glj-example]',
        tosDocLocation: new URL('/tos.md', window.location.href).toString(),
        offerHash: 'some-offer-hash',
        phoneFieldCells: 2,
        countryFieldCells: -1,
        passwordFieldCells: 1, 
        confirmPasswordFieldCells: 1,
        privacyFieldCells: 2,
        locale: 'de',
    })
})

Loading...