How to display the One Compatibility List on your website?

This snippet integrates the Compatibility Widget into a webpage. It is used to display compatibility information for products in a table format, with customizable appearance and pagination.

Purpose

The <compatibility-widget> displays a paginated and styled product compatibility table. It’s designed to be embedded in product or support pages to help users identify compatible devices or accessories.

Code Snippet

<compatibility-widget items-per-page="12" />
<script type="module" src="https://myflasher.com/widget.min.js"></script>
<style>
  compatibility-widget {
    --mf-font: "Rajdhani", sans-serif;
    --mf-border-color: #F1F1F1;
    --mf-border-radius: 10px;
    --mf-header-bg: #FFF;
    --mf-header-color: #000;
    --mf-cell-color: #000;
    --mf-cell-bg: #F9F9F9;
    --mf-table-bg: #FFF;
    --mf-title-color: #000;
    --mf-main-color: #039BE5;
    --mf-image-height: 30px;
    --mf-pagination-button-bg: #FFF;
    --mf-pagination-button-hover: #039BE5;
    --mf-pagination-button-color: #000;
    --mf-pagination-button-active: #039BE5;
    --mf-pagination-button-active-color: #FFF;
  }
</style>

Customization

The widget supports full style customization via CSS variables. Example of available options:

CSS Variable	Description
`--mf-font`	Font family used in the widget
`--mf-border-color`	Border color of the table
`--mf-header-bg / --mf-header-color`	Background and text color for header
`--mf-cell-bg / --mf-cell-color`	Background and text color for cells
`--mf-pagination-button-*`	Styling for pagination buttons

Usage Notes

items-per-page="12" sets the number of rows displayed per page.
The widget is loaded asynchronously via the external widget.min.js script.
Ensure this code is placed inside a valid HTML context (e.g., inside a CMS block or HTML section).

Note:

The compatibility list is also available on the myflasher.com website.