Widget Showcase

Every layout, every theme, every option.

See what EndorseKit looks like before you embed it. Every configuration below is one script tag away.

Grid

Grid · Light · 3 columns

gridlight

<script src="https://endorsekit.com/widget.js"
  data-project="your-project-id"
  data-layout="grid"
  data-theme="light"
  data-columns="3"
  data-max="6"></script>

Grid · Dark · 3 columns

griddark

<script src="https://endorsekit.com/widget.js"
  data-project="your-project-id"
  data-layout="grid"
  data-theme="dark"
  data-columns="3"
  data-max="6"></script>

Masonry

Masonry · Light · Variable-height cards

masonrylight

<script src="https://endorsekit.com/widget.js"
  data-project="your-project-id"
  data-layout="masonry"
  data-theme="light"
  data-max="9"></script>

Masonry · Dark

masonrydark

<script src="https://endorsekit.com/widget.js"
  data-project="your-project-id"
  data-layout="masonry"
  data-theme="dark"></script>

Carousel

Carousel · Light · Auto-scroll

carouselautoscroll

<script src="https://endorsekit.com/widget.js"
  data-project="your-project-id"
  data-layout="carousel"
  data-theme="light"
  data-autoscroll="smooth"
  data-speed="slow"></script>

Carousel · Dark · Auto-scroll

carouseldark

<script src="https://endorsekit.com/widget.js"
  data-project="your-project-id"
  data-layout="carousel"
  data-theme="dark"
  data-autoscroll="smooth"
  data-speed="slow"></script>

List

List · Light · 4 cards

listlight

<script src="https://endorsekit.com/widget.js"
  data-project="your-project-id"
  data-layout="list"
  data-max="4"></script>

List · Dark · 4 cards

listdark

<script src="https://endorsekit.com/widget.js"
  data-project="your-project-id"
  data-layout="list"
  data-theme="dark"
  data-max="4"></script>

Custom accent colors

Blue accent · Carousel · Dark

accent#2196F3

<script src="https://endorsekit.com/widget.js"
  data-project="your-project-id"
  data-layout="carousel"
  data-theme="dark"
  data-accent="#2196F3"></script>

Red accent · Grid · Light

accent#E53935

<script src="https://endorsekit.com/widget.js"
  data-project="your-project-id"
  data-layout="grid"
  data-accent="#E53935"
  data-max="3"></script>

All embed options

Attribute	Values	Default	Notes
`data-project`	Project ID	—	Required. From your dashboard.
`data-layout`	`grid` `masonry` `carousel` `list`	`grid`	Layout style
`data-theme`	`light` `dark`	`light`	Color theme
`data-max`	Any number	All	Maximum testimonials shown
`data-accent`	Hex color	`#D4A053`	Star color and accents
`data-columns`	`2` `3` `4` `auto`	`auto`	Grid & masonry
`data-rows`	`1` `2` `3` `all`	`all`	Grid only
`data-autoscroll`	`off` `step` `smooth`	`off`	Carousel only
`data-speed`	`slow` `medium` `fast`	`medium`	Carousel scroll speed
`data-arrows`	`true` `false`	`true`	Carousel nav arrows
`data-dots`	`true` `false`	`true`	Carousel dot indicators
`data-max-width`	`600` `800` `1000` `full`	`full`	Constrain widget width
`data-badge`	`true` `false`	`true`	Show "Powered by EndorseKit"