Chatbots – API

Last modified: August 29 2024.

Completely new to Chatbots? Checkout the Chatbot marketing page to learn more. SleekAI allows you to create chatbots programmatically using a simple API.

Rendering

Chatbots can be rendered using the sleekAi_render_chatbot function.


            sleekAi_render_chatbot([
      'data' => [
        'variables' => [
          'name'    => wp_get_current_user()->display_name,
          'content' => get_the_content(),
          'brand'   => get_field('brand')
        ],
        'instruction' => 'You are a chatbot on my site,
                          the content of the current page is {content}.
                          The brand of the current product is {brand}.
                          Currently, you are chatting with a customer called {name},
                          help him to solve his problem.',
    ]);

      Copy

As you see above, the instruction key supports the same {variables} syntax like in the UI. Dot notation is also supported, e.g. {user.first_name}.

All possible options are listed below:


            sleekAi_render_chatbot([
        'key' => 'my-chatbot', // required if you want to hook into a chatbot
        'data' => [
          'variables' => [],
          'instruction' => ''
        ],
        'security' => [
          'guideline' => false
        ],
        'provider' => [
          'openai' => [
            'model' => 'gpt-4',
            'temperature' => 0.2,
            'stream' => false
          ]
        ],
        'widget' => [
          'general' => [
            'fullscreen' => true
          ],
          'position' => [
            'alignment' => 'right',
            'distance' => '16px'
          ],
          'button' => [
            'type' => 'button', // 'button' or 'logo'
            'text' => 'Chat with AI',
            'textColor' => '#000000'
            'backgroundColor' => '#ffffff',
            'borderColor' => '#000000',
            'borderRadius' => '8px',
            'fontSize' => '14px'
            'logo' => [
              'url' => '',
            ]
          ],
          'chat' => [
            'initialMessage' => 'Hi, I am a chatbot',
            'theme' => 'light',
            'nameAi' => 'SleekAI',
            'inputText' => 'Send a message',
            'presets' => [
              'label' => 'Quickstart',
              'items' => [
                'How can I use SleekAI?',
                'What is SleekAI?',
                "What's the difference between SleekAI and OpenAI?",
              ]
            ]
          ],
          'logo' => [
            'url' => '',
          ]
      ]);

      Copy

Filters

It is possible to adjust the chatbot data before it is being rendered. This can be done using the sleekAi/chatbot filter.


            add_filter('sleekAi/chatbot', function ($chatbot) {
      $chatbot['data']['instruction'] .= 'Only answer in unformatted text, no code blocks.';

      return $render;
    });

      Copy

By ID

If you want to hook into a specific chatbot created in the admin dashboard, you can use the sleekAi/chatbot/id={id} filter.


            add_filter('sleekAi/chatbot/id=1', function ($chatbot) {
      $chatbot['data']['instruction'] .= 'Only answer in unformatted text, no code blocks.';

      return $render;
    });

      Copy

By Key

Hooking into a programmatic chatbot can be done using the sleekAi/chatbot/key={key} filter. The key is defined inside the arguments array when using the sleekAi_render_chatbot function.


            add_filter('sleekAi/chatbot/key=my-chatbot', function ($chatbot) {
      $chatbot['data']['instruction'] .= 'Only answer in unformatted text, no code blocks.';

      return $render;
    });

      Copy

JavaScript API

The chatbot can be controlled using the window.SleekAI.chatbot object. Right now, the following methods are available:

window.SleekAI.chatbot.open() Opens the chatbot
window.SleekAI.chatbot.open({ fullscreen: true }) Opens the chatbot in fullscreen mode
window.SleekAI.chatbot.close() Closes the chatbot


            // Open chatbot after 5 seconds
    setTimeout(() => {
      SleekAI.chatbot.open();
    }, 5000);

    // Custom close button
    document.querySelector('.sleek-ai-chatbot__close').addEventListener('click', () => {
      SleekAI.chatbot.close();
    });

      Copy