Tries

Examples a person can run with one tap.

  • kit.tries()
  • 308 B of CSS · 5 rules
  • kit-data.css
  • No script needed

Tryopenvibe.liveopenvibe.chatexample.com

Use it

On your server

const kit = require('openvibe-shared/kit');

const html = kit.tries({
      name: 'q',
      label: 'Try',
      items: [{ value: 'openvibe.live' }, { value: 'openvibe.chat' }, { value: 'example.com' }]
  });

In a page that draws itself

<link rel="stylesheet" href="https://openvibe.network/shared/kit.css">
<link rel="stylesheet" href="https://openvibe.network/shared/kit-data.css">
<script src="https://openvibe.network/shared/kit.js"></script>
<script src="https://openvibe.network/shared/kit-web.js" defer></script>

<script>
  const box = document.querySelector('#here');
  box.innerHTML = OpenVibeKit.tries({
        name: 'q',
        label: 'Try',
        items: [{ value: 'openvibe.live' }, { value: 'openvibe.chat' }, { value: 'example.com' }]
    });
  OpenVibeKit.enhance(box);
</script>
The HTML it returns · 306 B
<p class="ovk-try"><span>Try</span><a href="?q=openvibe.live" data-ovk-try="openvibe.live" data-ovk-name="q">openvibe.live</a><a href="?q=openvibe.chat" data-ovk-try="openvibe.chat" data-ovk-name="q">openvibe.chat</a><a href="?q=example.com" data-ovk-try="example.com" data-ovk-name="q">example.com</a></p>

What it weighs

Its own rules are 675 B, 308 B as sent: 2% of the kit's CSS. A page that draws it pays for the whole stylesheet once, and every other part comes free.