Knit Webapp

Knit UI Component with Vanilla JS

Suggest Edits

Import the web component in your html file

Firstly we need to import the web component through JS file link using a <script> tag inside <head> and declare the knit-auth element in <body> tag.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="src/assets/knit-logo.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Knit.dev</title>
    <script type="module" src="https://af1.getknit.dev/knit-ui-comp.js"></script>
  </head>
  <body>
    <knit-auth id="knit-dev">
    <!-- Declare a clickable element (preferably a button)  as child that has a slot attribute with value 'trigger' -->
    <button slot="trigger" class="slot-btn">Integrate via Knit</button>
    </knit-auth>
  </body>
</html>

📘

Make sure to import the web component script as a module

Make sure to include type="module" in the script tag.

Create a script file that contains the listener functions

Create a script that contains event listeners for knit-auth element and add it to the index.html file after the <body> tag. 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="src/assets/knit-logo.svg" />
    <meta name="viewport" content="width=dce-width, initial-scale=1.0" />
    <title>Knit.dev</title>
    <script type="module" src="https://af1.getknit.dev/knit-ui-comp.js"></script>
  </head>
  <body>
    <knit-auth id="knit-dev">
		<!--   Set skipIntro attribute to disable the introduction screen -->
		<!-- <knit-auth id="knit-dev" skipIntro> -->
    <!-- Declare a clickable element (preferably a button)  as child that has a slot attribute with value 'trigger' -->
    <button slot="trigger" class="slot-btn">Integrate via Knit</button>
    </knit-auth>
  </body>
  <script src="./knit-script.js"></script>
</html>

 // Backend call to generate & get the authSessionToken
  function newSessionListener() {
  // Hit your backend to generate authSessionToken
    fetch("https://yourbackend.com/getSessionToken", { method: "GET" })
    .then((res) => res.json())
    .then((r) => {
      document.getElementById("knit-dev").setAttribute("authsessiontoken", r.msg.token);
    });
  }
  // Upon finishing the integration flow
  function onFinishListener(event) {
  // integrationDetails is emitted through onFinish event
  console.log(event['detail']["integrationDetails"]);
  }
	
	// Upon deactivation of the integration
  function onDeactivateListener(event) {
  // integrationDetails is emitted through onDeactivate event
  console.log(event['detail']["integrationDetails"]);
  }

  // Upon closing of the knit-auth component
  function onKnitCloseListener(event) {
  console.log(event['detail']["knitClosed"]);
  }

  // Attach event listeners to the knit-auth component
  document.getElementById("knit-dev").addEventListener("onNewSession", newSessionListener);
  document.getElementById("knit-dev").addEventListener("onFinish", onFinishListener);
	document.getElementById("knit-dev").addEventListener("onDeactivate", onDeactivateListener);
  document.getElementById('knit-dev').addEventListener("onKnitClose", onKnitCloseListener);
  //Set the token once the component has mounted
  newSessionListener();

Things to consider:

  • Pass any element ( preferably a button ) as a child to the knit-auth element, with slot="trigger attribute. This element will open the UI Auth component when clicked.
  • Attach event listeners for onNewSession , onFinish , onDeactivate and onKnitClose events emitted from the knit-auth element. onNewSession event listener should call your backend to get a new auth session token, if need be.
  • Pass session token that you received from your backend to the authsessiontoken attribute of the knit-auth element through the onNewSession listener.
  • If you want to disable the introduction screen, set skipIntro attribute to true.
  • Upon completion of the integration setup flow, an integrationDetails object is emitted through the onFinish event, you can access the integrationDetails using e['detail']['integrationDetails'].
  • Upon deactivation of the integration, an integrationDetails object is emitted through the onDeactivate event, you can access the integrationDetails using e['detail']['integrationDetails'].
  • Upon closing of the knit-auth component, onKnitClose event is emitted.

Updated 8 months ago

What’s Next