Documentation

   

Everything you need to integrate Socket API into your applications

 

Quick start (60 seconds)

Drop the SDK into the page, give your inputs the kuyels class, and you're done. Below is a copy-pasteable minimal HTML page — open it in a browser and it works.

index.html 
<!DOCTYPE html>
<html lang="en">
<body>

<!-- 1. Add class="kuyels" to any input or textarea -->
<input    class="kuyels" placeholder="Type here…">
<textarea class="kuyels"></textarea>

<!-- 2. Set your API key BEFORE loading the SDK -->
<script>
      window.CONNECTION_PLUS = Object.freeze({
            API_KEY: "YOUR_API_KEY_HERE"
       });
</script>

<!-- 3. Load the SDK -->
<script src="https://nlp.fixbien.com:19476/static/kuyels.js"></script>

</body>
</html>
That's it. Autocomplete, next-word prediction, and typo / profanity flags are now live on every kuyels field. Press Tab to accept a suggestion.
1

Sign Up

Create your account and verify your email address. This takes less than a minute.

Go to Signup →
2

Create Project

Create a new project from your dashboard and give it a meaningful name.

Dashboard →
3

Get API Key

Open project settings and copy your API key. You'll use it in the next step.

API Keys →
4

Get your API key

Every project uses one api_key. You can get yours from the Connection Plus dashboard, or contact us at business-connectionplusuat.24livehost.com to start a trial.

There are two key types — pick the one that matches your stage:

  • Production — paid, no daily cap, full personalization.
  • Development — free tier with a daily request quota.
Keep your key safe. A web key is visible in browser source, so we recommend locking it to your allowed Origin in the dashboard. Server-to-server traffic should use a separate, unrestricted key.
5

Add the SDK script

The SDK is a single JavaScript file with no external dependencies. Add it right before </body>:

HTML 
<script>
// Must be defined BEFORE kuyels.js loads.
// Object.freeze() locks the config so nothing else on the page can mutate it.
  window.CONNECTION_PLUS = Object.freeze({
       API_KEY: "fxb_live_xxx"   // the only field you need
  });
</script>
<script src="https://nlp.fixbien.com:19476/static/kuyels.js"></script>

Supported languages

The SDK defaults to American English. To use a different language on a specific input, set data-kuyels-language on the element (see Step 3). Supported values:

  • en-US — American English (default)
  • en-GB — British English
  • en-AU — Australian English
  • en-NZ — New Zealand English
  • en-ZA — South African English
  • fr-FR — French (France)
Tip. Put both <script> tags at the bottom of <body> — that way the SDK only starts after your inputs are in the DOM.
6

Mark your inputs

Add class="kuyels" to any <input>, <textarea>, or contenteditable element you want to enhance. The SDK auto-attaches on page load and also watches the DOM for new kuyels elements added later.

You can freely mix kuyels with your own styling classes — they don't conflict:

HTML 
<!-- Brand class + your own design-system class -->
<input
  type="text"
  id="short-description"
  name="short_description"
  class="kuyels demo-input"
>

<textarea
 id="long-description"
name="long_description"
class="kuyels demo-textarea"
rows="8"
></textarea>
HTML 
<input
    type="text"
   class="kuyels"
   name="title"
   placeholder="Post title…"
  >
HTML 
<textarea
    class="kuyels"
    name="body"
    data-kuyels-language="en-GB"
    rows="6"
    ></textarea>
HTML 
<div
     class="kuyels"
     contenteditable="true"
     role="textbox"
     aria-label="Editor"
     ></div>

Per-element options (HTML data attributes)

  • data-kuyels-id — stable id used as editor_id (otherwise auto-generated).
  • data-kuyels-language — language for this input only (e.g. "en-GB", "fr-FR"). Default: "en-US".

Dynamic elements & SPA navigation

The SDK auto-enhances every .kuyels element it finds on page load and watches the DOM for new ones added later via a MutationObserver — so most SPA work needs zero extra code.

If you want to enhance an element manually (for example, right after your framework mounts it), call enhance():

JavaScript 
// Enhance one specific element
const editor = window.ConnectionPlusEditor.enhance(myTextarea);

// Or scan a subtree for every .kuyels element inside it
window.ConnectionPlusEditor.enhanceAll(document.getElementById("modal-root"));

// Tear down a single editor when its container is removed
editor.destroy();
Multiple inputs? No problem. All editors on a page share a single WebSocket and are multiplexed by editor_id — up to 32 per connection.

Server API at a glance

The SDK talks to these endpoints for you. Most teams never need to call them directly, but if you're building a custom client, here's the surface in one place.

GET /dictionary List personal-dictionary words for the current language.
DEL /dictionary/{word} Remove a word from the personal dictionary.

Authentication

  • GET / DELETE /dictionary — send header x-api-key: KEY.

Curl examples

Shell 
# 1. List personal dictionary
curl 'https://nlp.fixbien.com:19476/dictionary?language=en-US' \
  -H 'x-api-key: YOUR_KEY'

# 2. Remove a word
curl -X DELETE \
  'https://nlp.fixbien.com:19476/dictionary/hovercraft?language=en-US' \
  -H 'x-api-key: YOUR_KEY'

Troubleshooting

Nothing happens when I type

  • Check that window.CONNECTION_PLUS.API_KEY is defined before kuyels.js loads.
  • Open DevTools console and look for 4401 or 4403 WS close codes — those mean bad key or wrong origin.
  • Confirm your input has the literal class kuyels (lowercase, no prefix). It can be combined with other classes.
  • If you serve the page over HTTPS, the SDK must come from HTTPS and connect over WSS. Mixed-content is blocked by the browser.

WebSocket close codes

  • 4401 — missing or invalid api_key.
  • 4403 — key inactive, wrong type, blocked origin, or your balance is 0.
  • 1011 — server storage temporarily down; SDK reconnects automatically with exponential backoff.

"Package exhausted" banner

Your key ran out of requests. The socket stays open (typing still works), but no NLP responses are returned. Top up in the dashboard — the server will push a package_replenished frame as soon as the balance is back above 0.