MarkIII Embed

The MarkIII embed (M3E) is an easy, no-config, low-code embedded loan product. With a simple copy paste anyone on the team with access to your app or site can embed it such as your marketing, product, design, or software teams.

Quickstart

Step 1: Get it 📧

You will be given the embed code to copy paste without any configuration from our team. The code however is the same for everyone with the exception to the clientId field which you will get prefilled for you to copy and paste.

Step 2: Paste it 📋

The code given will inject the iframe where you paste this and try to fit into the frame 100% x 100% and blend into the page (no borders, background, etc).

The code will look like this:

<script src="https://cdn.mkiii.ai/v1/embed.js"></script>
<script>
  const embed = new MkiiiEmbed({
    clientId: 'your-client-id',
  })
  embed.init()
</script>

For most use cases, this is all you will need! For more control, we have options to help with styling and placement.

Step 3: Launch it 🚀

That’s really it! Give it a whirl and launch it. Since its cloud based this is the last time you’ll need to make updates with new updates pushed with no changes needed on your side.

Options

Name Description Required
clientId The ID for your loan flow. This is unique to you. ✅
containerSelector A CSS selector to inject the iframe into. If not provided the iframe will be injected where the script tag was placed in the DOM.
styles CSS, in JS format, to apply to your iframe element.

clientId

The clientId is a string that is specific to you. If you’d like to trial the embedding process before the contracts have been signed or integration is complete, reach out for a demo clientId.

Your client ID will be the same for your development and production environment.

Example

<script src="https://cdn.mkiii.ai/v1/embed.js"></script>
<script>
  const embed = new MkiiiEmbed({
    clientId: 'your-client-id',
  })
  embed.init()
</script>

containerSelector

The containerSelector is any CSS selector to be used to inject the iframe into.

If you do not provide this option it will just place the iframe where you pasted the <script>.

Examples

Paste into place
<html>
  <head>
    <!-- ... -->
  </head>
  <body>
    <h1>Apply for a loan</h1>
    <p>Fill out the form below!</p>

    <script src="https://cdn.mkiii.ai/v1/embed.js"></script>
    <script>
      const embed = new MkiiiEmbed({
        clientId: 'your-client-id',
      })
      embed.init()
    </script>

    <footer>
      All rights reserved to Demo Bank
    </footer>
  </body>
</html>

Add to head and inject into container 
<html>
  <head>
    <!-- ... -->
    <script src="https://cdn.mkiii.ai/v1/embed.js"></script>
    <script>
      const embed = new MkiiiEmbed({
        clientId: 'your-client-id',
        // Selector could also be `div` or any CSS selector
        containerSelector: '#my-iframe-container'
      })
      embed.init()
    </script>
  </head>
  <body>
    <h1>Apply for a loan</h1>
    <p>Fill out the form below!</p>
    <div id="my-iframe-container"></div>
    <footer>
      All rights reserved to Demo Bank
    </footer>
  </body>
</html>

styles

If you want to add some more specific styling to your iframe element (such as more specific sizing) you can use the styles option which takes JS style CSS (i.e. marginTop not margin-top).

By default, this is set to {border: 'none', height: '100%'}. The height is set as well but that happens dynamically.

How is height dynamically set?

If the height of the parent element is 0 it will fallback to 850px otherwise the height will be 100% of the containing element. It does not do height: 100% but rather uses the parent’s offsetHeight and sets the height to a pixel value as 100% height in CSS doesn’t work reliably across all environments.

Examples

Height set automatically
<html>
  <head>
    <!-- ... -->
    <style>
      #my-iframe-container {
        height: 400px;
      }
    </style>
    <script src="https://cdn.mkiii.ai/v1/embed.js"></script>
    <script>
      const embed = new MkiiiEmbed({
        clientId: 'your-client-id',
        // Selector could also be `div` or any CSS selector
        containerSelector: '#my-iframe-container'
      })
      embed.init()
    </script>
  </head>
  <body>
    <h1>Apply for a loan</h1>
    <p>Fill out the form below!</p>
    <!--
      Since this is set to 400px the iframe will become 400px tall.
      If no CSS were have been given it'd fall back to 850px.
    -->
    <div id="my-iframe-container"></div>
    <footer>
      All rights reserved to Demo Bank
    </footer>
  </body>
</html>

Height set manually, border overridden, and adds spacing 
<html>
  <head>
    <!-- ... -->
  </head>
  <body>
    <h1>Apply for a loan</h1>
    <p>Fill out the form below!</p>
    <script src="https://cdn.mkiii.ai/v1/embed.js"></script>
    <script>
      const embed = new MkiiiEmbed({
        clientId: 'your-client-id',
        // Selector could also be `div` or any CSS selector
        styles: {
          border: '1px solid red',
          height: '1000px',
          marginTop: '100px'
        }
      })
      embed.init()
    </script>
    <footer>
      All rights reserved to Demo Bank
    </footer>
  </body>
</html>

Questions?

Any questions or comments feel free to reach out.