Marfeel Docs

# Widgets.json

There are two different types of widget extensions: Third-party Implementation (3pi) and Provider Widgets.

A Tenant's widget extensions are configured in the widgets.json file, located in its root directory.

For example, the widgets.json of a Tenant using Spot.IM would look like:

{
  "widgets": [
    {
      "selector": "[data-m101-type=custom-widget]",
      "src": "www.example.com/us/monetizer101-widget.js"
    },
    {
      "selector": "[data-property='v:rating']",
      "src": "www.example.com/us/rating-widget.js",
      "height": "34px"
    },
    {
      "type": "provider",
      "selector": ".embedly-card",
      "id": "embedly-card",
      "name": "embedly",
      "parameters": {
        "foo": "bar"
      }
    }
  ]
}

# Attributes

# Common attributes

name required description examples
selector yes Selector matching the DOM element you need to transform into a Widget. [#my-id],
[.selector],
[id^='os_set']
parameters no Parameters that can be passed to the widget's logic. {"foo": "bar"}

# Third-party widget attributes

name required description examples
type: 3pi no Optional since third-party widgets are the default type.
src yes Path of the 3pi widget logic. "src": "tenantName/index/widgetsname.js"
or "src": "marfeel/index/widgetsname.js"
templateUrl no Used when the widget src needs to be under the client's domain in order to avoid CORS errors. If we need to use this, we need to ask the client to host this file (opens new window) on their server.
This will load the widgetProxy.js file (opens new window) and this one will load the current widget.		 In this link (opens new window) you will find a 3pi-widget using the proxyTemplate configured like this (opens new window).
height no Custom height for widgets smaller than 100px (AMP restriction). 34px
iframeAttrs no Attributes that will be added to the iframe containing the 3pi widget.
Only allowed:
data-*, referrerpolicy, srcdoc, allow, allowfullscreen, allowpaymentrequest.		 {"allow": "autoplay"}

CDN

Tenants that have our CDN active have this file automatically available under the url:

www.exampleoftenant.com/mrf4u/statics/marfeel/resources/3pi-widgets/proxyTemplate.html

# Provider Widgets

Beta

This feature is in Beta. Don't use Widget Providers unless explicitly asked to by the TEN team.

name required description examples
type: provider yes If not defined the widget will default to a third party widget.
name yes Name of the widget provider to use. For provider @marfeel/widget-providers-hello-world:
hello-world
id no ID to use for the widgets placeholder element in the data-mrf-component-id attribute. my-widget
translates to:
<div data-mrf-component-id="my-widget"></div>
middleware no Name of the folder the middleware is at.

# Inheritance

widgets.json follows Marfeel's inheritance rules.

← Widgets Providers →