Chatbots - API
# Chatbots - API
Completely new to Chatbots? Checkout the [Chatbot marketing page](https://fabrikat.local/sleek/ai/features/chatbots/) 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.
```php
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.',
]);
```
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:
```php
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' => '',
]
]);
```
## Filters
It is possible to adjust the chatbot data before it is being rendered. This can be done using the `sleekAi/chatbot` filter.
```php
add_filter('sleekAi/chatbot', function ($chatbot) {
$chatbot['data']['instruction'] .= 'Only answer in unformatted text, no code blocks.';
return $render;
});
```
### 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.
```php
add_filter('sleekAi/chatbot/id=1', function ($chatbot) {
$chatbot['data']['instruction'] .= 'Only answer in unformatted text, no code blocks.';
return $render;
});
```
### 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.
```javascript
add_filter('sleekAi/chatbot/key=my-chatbot', function ($chatbot) {
$chatbot['data']['instruction'] .= 'Only answer in unformatted text, no code blocks.';
return $render;
});
```
## JavaScript API
The chatbot can be controlled using the `window.SleekAI.chatbot` object. 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
- `window.SleekAI.chatbot.hide()` Hides the chatbot
- `window.SleekAI.chatbot.show()` Shows the chatbot
All methods optionally accept an `index` parameter when working with multiple chatbots: `window.SleekAI.chatbot.open({ index: 2 })`
```javascript
// Open chatbot after 5 seconds
setTimeout(() => {
SleekAI.chatbot.open();
}, 5000);
// Custom close button
document.querySelector('.sleek-ai-chatbot__close').addEventListener('click', () => {
SleekAI.chatbot.close();
});
// Hide chatbot, for example when opening another modal
SleekAI.chatbot.hide();
// Show chatbot again
SleekAI.chatbot.show();
// When working with multiple chatbots
SleekAI.chatbot.open({ index: 2 }); // Opens second chatbot
SleekAI.chatbot.close({ index: 2 }); // Closes second chatbot
```
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
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.',
]);
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
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' => '',
]
]);
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
add_filter('sleekAi/chatbot', function ($chatbot) {
$chatbot['data']['instruction'] .= 'Only answer in unformatted text, no code blocks.';
return $render;
});
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
add_filter('sleekAi/chatbot/id=1', function ($chatbot) {
$chatbot['data']['instruction'] .= 'Only answer in unformatted text, no code blocks.';
return $render;
});
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
add_filter('sleekAi/chatbot/key=my-chatbot', function ($chatbot) {
$chatbot['data']['instruction'] .= 'Only answer in unformatted text, no code blocks.';
return $render;
});
JavaScript API
The chatbot can be controlled using the window.SleekAI.chatbot object. The
following methods are available:
window.SleekAI.chatbot.open()Opens the chatbotwindow.SleekAI.chatbot.open({ fullscreen: true })Opens the chatbot in fullscreen modewindow.SleekAI.chatbot.close()Closes the chatbotwindow.SleekAI.chatbot.hide()Hides the chatbotwindow.SleekAI.chatbot.show()Shows the chatbot
All methods optionally accept an index parameter when working with multiple chatbots:
window.SleekAI.chatbot.open({ index: 2 })
// Open chatbot after 5 seconds
setTimeout(() => {
SleekAI.chatbot.open();
}, 5000);
// Custom close button
document.querySelector('.sleek-ai-chatbot__close').addEventListener('click', () => {
SleekAI.chatbot.close();
});
// Hide chatbot, for example when opening another modal
SleekAI.chatbot.hide();
// Show chatbot again
SleekAI.chatbot.show();
// When working with multiple chatbots
SleekAI.chatbot.open({ index: 2 }); // Opens second chatbot
SleekAI.chatbot.close({ index: 2 }); // Closes second chatbot
Copy
// Open chatbot after 5 seconds
setTimeout(() => {
SleekAI.chatbot.open();
}, 5000);
// Custom close button
document.querySelector('.sleek-ai-chatbot__close').addEventListener('click', () => {
SleekAI.chatbot.close();
});
// Hide chatbot, for example when opening another modal
SleekAI.chatbot.hide();
// Show chatbot again
SleekAI.chatbot.show();
// When working with multiple chatbots
SleekAI.chatbot.open({ index: 2 }); // Opens second chatbot
SleekAI.chatbot.close({ index: 2 }); // Closes second chatbot