@lukaz/widget v0.0.16-beta

Lukaz Widget

Hello and welcome to the Lukaz Widget project, this widget it's part of the lukaz project

You can already use this widget, you just need to have a lukaz account and follow the steps below :)

First steps

For the widget to work first you need to have an lukaz account, an API key and an active board with a filed uploaded and processed.

When you open lukaz website you will have a new guest account created with a board already, just upload a file that you want to ask questions to. Also check the name of the board, you will need to use it inside the configuration for the widget too.

Now you just need to go into Settings section, go to security and then create a new API key, copy this key because you need to use it inside the widget :)

These same steps can be done in our development environment, access lukaz.dev, upload your file and go to development setting section to create an API key.

How to use the widget

Copy one of our CDNs:

https://cdn.jsdelivr.net/npm/@lukaz/widget@latest/lukaz/lukazWidget.js
or
https://www.unpkg.com/@lukaz/widget@latest/lukaz/lukazWidget.js

Then you must add a div with an id or unique class of your choice, the div of your choice must have style="display: block" for it to work correctly. Now use this script inside your HTML code :D

<!-- Inside index.html or any other html file -->
<!-- Loading widget using id, we recommend using id -->
<div id="ID_NAME" style="display: block"></div>

<!-- Loading widget using class, it must be unique -->
<div class="CLASS_NAME" style="display: block"></div>

<script>
  (function (w, d, s, o, f, js, fjs) {
    w['Lukaz-Widget'] = o;
    w[o] = w[o] || function () {(w[o].q = w[o].q || [])push(arguments);};
    (js = d.createElement(s)), (fjs = d.getElementsByTagName(s)[0]);
    js.id = o;
    js.src = f;
    js.async = 1;
    fjs.parentNode.insertBefore(js, fjs);
  })(window, document, 'script', 'lw', '<CDN OR PATH TO WIDGET>');
  lw('start', {
    // Choose only one so the widget can load
    idName: 'ID_NAME',
    // className: 'CLASS_NAME'

    board: '<BOARD_ID_FROM_LUKAZ>',
    apiKey: '<API_KEY_FROM_LUKAZ>',
    theme: 'dark',

    // if using development mode uncomment the line below
    // mode: 'dev'
  });
</script>

Change <CDN OR PATH TO WIDGET> to one of our CDNs, change <BOARD_ID_FROM_LUKAZ> to the board name that you have on lukaz, and change <API_KEY_FROM_LUKAZ> to the API key that you created on lukaz.

Then simply call the function lw(<method name>, <configuration parameter>)

In this version the only method available is 'start'

Configurations parameters are passed inside an object, here is the keys and values you can use:

{

  // Choose only 1 of them, a class or a id
  className: string,   // name of a div class
  idName: string,      // name of a div id

  // this is required for the widget to work
  board: string,   // which board you want to use to ask questions to Lukaz

  // this is required to access the board and make questions
  apiKey: string,          // you can create this key when you have you Lukaz account

  // if would you like to choose where the result will be shown, by default it's just below the question input
  resultClassName: string,    // name of a div class
  resultIdName: string,       // name of a div id

  // if you hide spoken result or translated result you can add this option to set it's default value
  options?: {
    translatedResult: boolean,   // true = result will always be the same language as the result
    spokenResult: boolean,       // true = and audio will play reading the result
  },

  // choose dark of light theme for the widget, it's based on the original design from the website lukaz.io
  theme: 'dark' | 'light',

  // for development environment
  mode: 'dev'

  // to choose a language
  lang: 'en' | 'es' | 'de' | 'pt',

  // to limit the max questions that can be made
  maxQuestions: number
}