Getting Started

Prerequisites

A CareConekt API key (ck_ prefixed), created in your organisation’s admin portal
A web page you can add a script tag to

Installation

Add the script tag to your page. The script is the whole widget: its styles are built in, and nothing else needs to be installed.

<script src="https://docs.careconekt.net/codesystem-widget/v0/careconekt-codesystems.js"></script>

The v0 segment is the widget’s major version. Non-breaking updates arrive under the same URL; a breaking change ships under a new segment, and the old one keeps working.

Quick Start

1. Add the HTML elements

The widget needs two paired HTML elements linked by a data-ccs-ino attribute:

<!-- Search input — stays in your page's DOM so you can style it freely -->
<input
  type="text"
  class="ccs-input"
  data-ccs-ino="1"
  placeholder="Search medical codes..."
  autocomplete="off"
/>

<!-- Results container — the widget renders inside this -->
<div class="ccs-window" data-ccs-ino="1"></div>

Note

The data-ccs-ino value links an input to its results container. Use different values ("1", "2", etc.) for several independent widgets on the same page.

2. Configure and initialise

<script>
  CareConekt.CodeSystems.configure({
    apiBaseUrl: "https://gw.careconekt.net/api/codesystems-search",
    apiKey: "ck_your_api_key_here",
    onSelect: function (concept, instanceId) {
      console.log("Selected:", concept.code, concept.display);
      // Use the selected code in your application
    },
  });

  CareConekt.CodeSystems.bind("1");
</script>

3. Use it

Type in the search input: suggestions appear after 2 characters
Press Enter: runs a full search with paged results
Click a result: fires your onSelect callback with the concept
Click the info icon: opens the concept detail panel
Use the code system dropdown: limits the search to one code system

Minimal Complete Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Code Search</title>
    <script src="https://docs.careconekt.net/codesystem-widget/v0/careconekt-codesystems.js"></script>
    <style>
      .ccs-input {
        width: 400px;
        padding: 10px;
        font-size: 15px;
        border: 1px solid #ccc;
        border-radius: 6px;
      }
    </style>
  </head>
  <body>
    <h1>Medical Code Search</h1>

    <input
      type="text"
      class="ccs-input"
      data-ccs-ino="1"
      placeholder="Search ICD-10, CPT, LOINC..."
      autocomplete="off"
    />
    <div class="ccs-window" data-ccs-ino="1"></div>

    <p>Selected: <strong id="output">None</strong></p>

    <script>
      CareConekt.CodeSystems.configure({
        apiBaseUrl: "https://gw.careconekt.net/api/codesystems-search",
        apiKey: "ck_your_api_key_here",
        onSelect: function (concept) {
          document.getElementById("output").textContent =
            concept.code + " — " + concept.display;
        },
        onError: function (error) {
          console.error("Widget error:", error.message);
        },
      });

      CareConekt.CodeSystems.bind("1");
    </script>
  </body>
</html>

Multiple Instances

You can have several independent search widgets on the same page:

<input type="text" class="ccs-input" data-ccs-ino="1" placeholder="Search diagnoses..." autocomplete="off" />
<div class="ccs-window" data-ccs-ino="1"></div>

<input type="text" class="ccs-input" data-ccs-ino="2" placeholder="Search procedures..." autocomplete="off" />
<div class="ccs-window" data-ccs-ino="2"></div>

<script>
  CareConekt.CodeSystems.configure({
    apiBaseUrl: "https://gw.careconekt.net/api/codesystems-search",
    apiKey: "ck_your_api_key_here",
    onSelect: function (concept, instanceId) {
      console.log("Instance " + instanceId + " selected:", concept.code);
    },
  });

  CareConekt.CodeSystems.bind("1");
  CareConekt.CodeSystems.bind("2");
</script>

Each instance keeps its own state: searching in one does not affect the other.