> For the complete documentation index, see [llms.txt](https://modfin.gitbook.io/datablocks/-LYRjiiPF4zveC0T_zB_/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://modfin.gitbook.io/datablocks/-LYRjiiPF4zveC0T_zB_/overview/integration-methods.md).

# Integration methods

Overview

There are several ways to integrate with the API. Most of the widgets can handle all of the integration methods, but there are some exceptions.

## JS-loader

The JS-loader is the preferred way to integrate Datablocks widgets. It's basically a script wrapping (and executing) a function that takes as it's input a set of widget tokens and corresponding DOM-element selectors, then fetches the widgets and inserts them into the DOM-elements.

{% content-ref url="/pages/-LYRwAI\_rYZ8ma7PE\_cr" %}
[JS-Loader](/datablocks/-LYRjiiPF4zveC0T_zB_/integration/js-loader.md)
{% endcontent-ref %}

## Wordpress Widget

* The MF Datablocks Wordpress Widget is a plugin which lets you add one (or multiple) Datablocks widgets to your Wordpress site. 
* It enables an easy way to embed various types of Datablocks data from MFN for a particular company, onto different sections of your site.

{% content-ref url="/pages/-LzLr-Ws3y5uUA044EjG" %}
[Wordpress Plugin](/datablocks/-LYRjiiPF4zveC0T_zB_/integration/wordpress-widget.md)
{% endcontent-ref %}

## Request - JSON

* The API support JSON formatted responses. 
* This solution puts higher requirements on the integration since the data isn't formatted. It means you have to handle the locale, percent formation, signs for positives/negatives and so on.

{% content-ref url="/pages/-LYRwC6Kh5tcZ59t4gfp" %}
[Request - JSON](/datablocks/-LYRjiiPF4zveC0T_zB_/integration/request-json.md)
{% endcontent-ref %}

## Request - HTML

* The API support templated HTML responses. 
* This solution puts lower requirements on the integration since the data is formatted. This means you don't have to handle the locale, percent formation, signs for positives/negatives and so on.
* Specific css-classes are also appended when needed. 

{% content-ref url="/pages/-LYRwGdqrAwSQEFFi4TE" %}
[Request - HTML](/datablocks/-LYRjiiPF4zveC0T_zB_/integration/request-html.md)
{% endcontent-ref %}

## IFRAME

* For very quick integrations
* Cons
  * Not easy to style from your side
  * Just basic functionality

{% content-ref url="/pages/-LYRwJODL4F9fAoMK2t5" %}
[IFrame](/datablocks/-LYRjiiPF4zveC0T_zB_/integration/iframe.md)
{% endcontent-ref %}

## Vue.js

A simple Vue.js component wrapper for the JS loader

{% content-ref url="/pages/txIMhunyrYPK05c2Wheb" %}
[Vue.js](/datablocks/-LYRjiiPF4zveC0T_zB_/integration/vue.js.md)
{% endcontent-ref %}

## React

A simple react component wrapper for the JS loader

{% content-ref url="/pages/-LsvCakQRmDcCNz31iqB" %}
[React](/datablocks/-LYRjiiPF4zveC0T_zB_/integration/react.md)
{% endcontent-ref %}