Prebuilt user interfaces

Insurely hosts and provides the user interface to be embedded in your application. This option allows customers to quickly start with the product, learn, and then iterate to improve the complete user journey. We provide a tested and validated user journey, always using Insurely's latest API version.

We invest in standardized user interface libraries that are optimized for conversion and that minimize the amount of work you have to do in integrating to our products.

When using the prebuilt user interfaces, you have access to all of Insurely's products through a single integration.

Getting Started

Here's how to integrate Insurely's prebuilt user interfaces into your website:

Get your Customer ID and Config name

E-mail us at support@insurely.com, and we'll provide the Customer ID and Config name.

Please provide the URL of the domain where the prebuilt user interface will be embedded so its access can be configured.

Add the iframe to your website

The Insurely user interface is added as an iframe on an appropriate page. If you want to try the module as an iframe you can find it on our demo page.

The iframe is embedded with the following html tag:

<iframe
  id="insurely-data-aggregation"
  title="insurely-data-aggregation"
  src="https://blocks.insurely.com/"
  sandbox="allow-scripts
    allow-same-origin
    allow-popups
    allow-forms
    allow-popups-to-escape-sandbox
    allow-top-navigation"
/>

Add the required setup code

You'll need to add two pieces of code to your website's page header (the <head> section of your HTML):

Add the Insurely script: Copy and paste this code into your page header:

<script type="text/javascript" src="https://blocks.insurely.com/assets/bootstrap.js"></script>

Optional: If you need advisor dashboard features If you're using the advisor dashboard functionality, use this version instead:

<script
  type="text/javascript"
  src="https://blocks.insurely.com/assets/bootstrap.js"
  data-include-advisor-handle="true"
  data-include-reference-id="true"></script>

Add your configuration: Add this code right after the script above, replacing the placeholder values with your actual Customer ID and Config name (provided in step 1):

<script async>
  window.insurely = {
    config: {
      customerId: 'xxx',
      configName: 'abc-123',
    },
  };
</script>

What this does:

The first script loads Insurely's tools and functions
The second script tells Insurely who you are and which settings to use

Pre-fill customer information (optional)

You can pre-fill the Insurely interface with your customer's information so they don't have to enter it again. This is especially useful if you're adding the interface to a customer's account page or "My Pages" section.

When to use pre-filling:

Your customer is already logged into your website
You want to skip the initial company selection step
You want to personalize the experience for your customer

How to add pre-filled information:

Replace your existing configuration code with this expanded version:

<script async>
  window.insurely = {
    config: { customerId: 'xxx', configName: 'abc-123' },
    prefill: {
      user: { swedishPersonalNumber: '200001020000' },
      dataAggregation: { company: 'se-demo' },
    },
  };
</script>

Next Steps

Now that you have the basic integration set up, you can explore additional features:

Configuration Reference - Complete guide to all available settings and options