Chatbots - API

Last modified:

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' => [
          'button' => [
            'type' => 'button', // 'button' or 'logo'
            'text' => 'Chat with AI',
            'textColor' => '#000000'
            'backgroundColor' => '#ffffff',
            'borderColor' => '#000000',
            'fontSize' => '14px'
            'logo' => [
              'url' => '',
            ]
          ],
          'chat' => [
            'welcomeMessage' => 'Hi, I am a chatbot',
            'theme' => 'light',
            'nameAi' => 'SleekAI',
            'inputText' => 'Send a message',
            'closeButtonText' => 'Close',
            '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.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

Custom styles

Since the chatbot is rendered in an iframe, it is not possible to style it directly using CSS. However, it is possible to use the sleekAi/chatbot/markup filter to add custom styles to the chatbot iframe.


            add_filter('sleekAi/chatbot/markup', function ($markup) {
      $markup .= '<style>
        :root {
          --sleek-ai--chatbot-button--background-color: white;
        }
      </style>';

      return $markup;
    });

      
Copy