1. Docs
  2. Integrations

Domains widget

Iframely supports over two thousand rich media providers. While it is a challenge for us to maintain the full list, we do our best and maintain an embeddable widget of supported publishers, so you can share some of those providers with your users.

Here’s how the widget looks:

Widget is built as a web component so you can program it without cross-domain restrictions. Here’s its basic embed code:

<iframely-domains></iframely-domains>
<script type="module" src="https://iframely.net/domains.js"></script>

The widget is configurable. You can change the icon styles, page size, as well as choose some tag categories and the first page. Read this complete specification of every widget attribute, or customize your widget here with WYSIWYG editor.

Attributes

To change the behaviour of domains widget, you can set different attribute values. For example, here’s a dark theme with small icons:

<iframely-domains theme="dark" icon-size="small"></iframely-domains>
<script type="module" src="https://iframely.net/domains.js"></script>

Please note that src of widget’s script can be sourced from your custom CDN.

Below is the list of the attributes with possible values.

theme

Values: auto, light, dark
Default: auto

Sets the widget color mode (dark and light theme). auto mode automatically chooses between light and dark modes depending on users’ system settings.

font-family

Values: inherit, system-ui, sans-serif, serif
Default: inherit

Sets the font. To use your custom font, use default inherit value. system-ui will use user’s default operating system font.

icon-size

Values: small, medium, large
Default: medium

icon-style

Values: fill, fill-accent, border, border-accent, plain
Default: fill-accent

icon-shape

Values: square, round-square, squircle, circle
Default: round-square

sort

Values: rank, sitename, accent-color
Default: rank

Defines the order of the providers in the list. Default is the rank that we take from SimilarWeb, smallest number being the most popular on the Internet. sitename will sort the widget alphabetically.

tags

Values: comma-separated list of keywords
Default: empty

The widget is searchable by keywords and provider names. You may have some of the keyword tags be added as categories in your widget. The categories will show up as the tab navigation.

The navigation will be added only for supported tags. If a tag yields no publishers, it will be omitted.

lead-tags

Values: comma-separated list of keywords
Default: empty

Similar to tags above, lead-tags are to choose categories that go onto the front page. Whatever tags you choose will form the landing “lead” list of publishers in your widget.

page-size

Values: number
Default: 60

The number of providers per page. The widget is responsive, but pagination always using the same number of providers so you can control it.

Please put the widget on your page and see if you need to adjust the page size so it fits well with no empty spaces.

60 is the default value so it works well in many scenarios, yielding full rows with 2, 3, 4, 5, 6 columns.

Events

The widget raises a few events so you can change some behaviours.

iframely-domains-click

If you need one, add a handler for when your user clicks on a provider. The event body will come with the provider information.

document.querySelector('iframely-domains').addEventListener('iframely-domains-click', (event) => {
  event.preventDefault();
  // Handle `event.detail` in your code here...
});

The provider/domain information will come as event’s detail property:

// event.detail
{
  sitename: 'Iframely',
  domain: 'iframely.com',
  slug: 'iframely',
  url: 'https://iframely.com'
}

iframely-domains-load and iframely-domains-update

These are the events when the widget loads its initial size or updates the size.

Because the widget has no height initially, you may experience quite a bit of layout shift. To avoid that, you may reserve the empty space for the list of providers and adjust that space on widget’s triggers.

Docs