The Conversion Rate Optimization Kit

Help your users get things done, faster. These are drop-in upgrades for some common web browser functionality.

Hypothesis: With just these few components, you can build complex B2B SaaS applications, with very little code.

OptKit.com

optkit is a vanilla javascript component which will work in any frontend framework. You can install from npm like this:

npm install --save optkit

Usage: Javascript (assumes es module)

import OptKit from 'optkit';
let optKit = new OptKit({target:document.body});

The “target” is where the component is created. Here it is added to the html body with “document.body”, but it could also be document.getElementById(‘id-of-html-element’).

You initialize properties with “props” and you can change the prop values by just assigning the props to new values - this will be updated in the UI.

Usage: Legacy Javascript

Below you can see how to use the component with vanilla js.

<head>
  <script src="https://unpkg.com/optkit@latest/index.js"></script>
</head>
<body>
  <script>
    let optKit = new OptKit({target:document.body})
  </script>
</body>

Usage: Web Component (aka. Custom Element)

You can use it as a web component.

<head>
  <script src="https://unpkg.com/optkit@latest/index.js"></script>
</head>
<body>
  <opt-kit  />    
</body>

Svelte Component

<script>
  import OptKit from 'optkit';
</script>
<OptKit/>

How To Use

const testAlert = () => alert("alert.");

const testPrompt = async () => {
  let answer = await prompt("prompt?");
  if (answer) alert(answer);
};

const testConfirm = async (_) => {
  let confirmed = await confirm("confirmed?");
  if (confirmed) alert(confirmed);
};

const openMenu = async (event) => {
  menu(event, [
    { label: "testAlert()", onClick: testAlert },
    { label: "testPrompt()", onClick: testPrompt },
    { label: "testConfirm()", onClick: testConfirm },
  ]);
};

 <button on:click={openMenu}>
  menu()
 </button>