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.
- For technical questions email: engineering@mkiii.ai
- For sales email: sales@mkiii.ai
- For a demo: find a time