hero

Shapes

Magic Drop-in Omneo UI components all in under 20kb gzipped 🎉

Get Started →

Simplicity First

Drop in with minimal setup with simple JS/CSS includes and easy-to-use data attribute configuration

Sharing is caring

Shapes share Omneo resource data! That means no double ups on requests and all shapes stay in sync

Performant

Shapes cache their state between page loads, so reloads won't cause you headaches with lots of empty data

As Easy as 1, 2, 3

Include Shapes JS and CSS in <head/>

<script type="text/javascript" src="https://cdn.omneo.io/shapes/beta/omneo.shapes.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.omneo.io/shapes/beta/omneo.shapes.css">

Initialise shape support in <head> or <body>

<script>
    omneoShapes({
        url: {{api_url}},
        token: {{api_token}},
        profileId: {{profile_id}}
    })
</script>

Include a shape in your page

<div data-omneo-shape="RewardBalance"></div>