Required Plan: Free plan and above

Widget Customization

Use script tag data attributes to customize theme color, welcome message, AI context and more. Advanced features for developers who prefer not to use the WordPress plugin.

Full Code Control

Manage all settings via script tag data attributes. Perfect for version control and deployment automation.

Dynamic Customization

Change theme color and welcome message in real-time by simply modifying data attributes with JavaScript.

Event Integration

Listen to custom events to integrate with Google Analytics and other tools. Track user behavior in detail.

Basic Usage

Display a chatbot with default settings using a minimal script tag.

<script src="https://sokuto.ai/script.js" data-id="YOUR_API_KEY" defer></script>

Full Example

Example using all data attributes.

<script
  src="https://sokuto.ai/script.js"
  data-id="YOUR_API_KEY"
  data-theme-color="#FF5733"
  data-welcome-message="Hello! How can I help you?"
  data-context="This is the pricing page"
  data-user-context='{"is_logged_in":true,"plan":"pro"}'
  data-lang="en"
  defer
></script>

Data Attributes

List of data attributes you can set on the script tag. Attributes that support dynamic updates will reflect changes immediately when modified via JavaScript.

data-idRequired

Chatbot API key (required)

data-id="YOUR_API_KEY"

data-theme-colorDynamic

Theme color for chat button and header (HEX code)

data-theme-color="#FF5733"

data-welcome-messageDynamic

Welcome message displayed when chat opens

data-welcome-message="Hello! How can I help you?"

data-context

Pass additional context to AI (e.g., page-specific information)

data-context="This is the pricing page"

data-user-context

Pass user information in JSON format (login status, plan info, etc.)

data-user-context='{"is_logged_in":true,"plan":"pro"}'

data-lang

Language setting (ja or en)

data-lang="en"

Custom Events

Listen to custom events fired by the chatbot to integrate with analytics tools.

sokutoai:chat_open

Fired when the chat widget is opened

Detail: timestamp: Time opened (milliseconds)

sokutoai:message_sent

Fired when user sends a message

Detail: message: Sent message, timestamp: Send time

Google Analytics Integration

// Track chat open
window.addEventListener('sokutoai:chat_open', function(event) {
  gtag('event', 'chat_open', {
    'event_category': 'engagement',
    'event_label': 'sokuto_chatbot'
  });
});

// Track message sent
window.addEventListener('sokutoai:message_sent', function(event) {
  gtag('event', 'chat_message', {
    'event_category': 'engagement',
    'event_label': event.detail.message
  });
});

Dynamic Updates

Modifying script tag data attributes via JavaScript will instantly update chatbot settings. Theme color and welcome message support dynamic updates.

// Dynamically change theme color
var script = document.querySelector('script[data-id]');
script.setAttribute('data-theme-color', '#00FF00');

// Dynamically change welcome message
script.setAttribute('data-welcome-message', 'New message!');

WordPress Plugin Comparison

Achieve the same functionality as WordPress plugin hooks and filters using data attributes.

WordPress Hook	Data Attribute / Event
`sokutoai_widget_enabled`	Control by adding/removing script tag
`sokutoai_welcome_message`	`data-welcome-message`
`sokutoai_user_context`	`data-user-context`
`sokutoai_script_attributes`	Set each data attribute directly
`sokutoai_on_chat_open`	`sokutoai:chat_open`
`sokutoai_on_message_sent`	`sokutoai:message_sent`

Get Started Today

Add a highly customizable AI chatbot to your site with just one line of script tag.