Actions

It's an action pushed by the model to execute a function on the client-side. Best is to use Snippet Vault, attach a Callable Action with a JS as Target, and attach it to the chatbot. The action will be automatically executed on the client-side.

How to create an Action

If you are manually creating this action, ensure the function structure is as follows:

⚙

data: { name, args }

With Snippet Vault, create a new Callable Snippet and ensure it’s in JavaScript (frontside). Don’t forget to go to the “Callable” tab and add a description and information about your parameters to help the AI model understand what you are trying to do.

Once this is done, make sure you don’t forget to enable this function for your chatbot, or it won’t be able to trigger it. For this, like any other function, go into your chatbot settings and ensure you have checked the newly created function.

Then your chatbot will be able to execute this function as it will be declared in the DOM from Snippet Vault. Let’s see an example here:

Shortcut

A shortcut is basically a button that will be pushed by the server-side or directly in JS via the MwaiAPI (setShortcuts). Each shortcut has a type and data.

Message

The label will be displayed in a button in the chatbot. When clicked, the message will be sent to the chatbot. The appareance of the button can be customized through its variant and icon.

⚙

data: { label, message, icon, variant (success, warning, danger, info) }

Examples

You can create these shortcuts either by using JS or PHP. This means you can create them dynamically by using the above actions as we have seen. Here are examples in both JS and PHP:

MwaiAPI.chatbots.forEach(chatbot => {
    chatbot.setShortcuts([
        {
            type: 'message',
            data: {
                label: 'Hi',
                message: 'Hello, nice to meet you, what can you do for me?',
                variant: 'info',
                icon: null
            }
        },
        {
            type: 'message',
            data: {
                label: 'Bye',
                message: 'Goodbye, see you soon!',
                variant: 'danger',
                icon: null
            }
        }
    ]);
});

add_filter("mwai_chatbot_shortcuts", function ($shortcuts, $args) {
    // The block will be added only if the word 'shortcut' is detected in the query or reply
    if (strpos($args['reply'], 'shortcut') === false && strpos($args['newMessage'], 'shortcut') === false) {
        return $blocks;
    }
    
    $shortcuts[] = [
        'type' => 'message',
        'data' => [
            'label' => 'Hi',
            'message' => 'Hello, nice to meet you, what can you do for me?',
            'variant' => 'info',
            'icon' => null
        ]
    ];

    $shortcuts[] = [
        'type' => 'message',
        'data' => [
            'label' => 'Bye',
            'message' => 'Goodbye, see you soon!',
            'variant' => 'danger',
            'icon' => null
        ]
    ];

    return $shortcuts;
}, 10, 2);

Block

It's a some HTML code that can be pushed by the server-side or directly in JS via the MwaiAPI (setBlocks). A block can be blocking or non-blocking. For instance, it could force an user to enter some data before continuing.

Content

⚙

data { html, script }

Examples

You can create these Blocks either by using JS or PHP. This means you can create them dynamically by using the above actions as we have seen. Here are examples in both JS and PHP:

MwaiAPI.getChatbot().setBlocks([
  {
    type: 'content',
    data: {
      html: `
        <p>The chatbot will be blocked until you type your name.</p>
        <form id="userForm">
          <label for="name">Name:</label>
          <input type="text" id="name" name="name" required><br><br>
          <button type="submit">Submit</button>
        </form>
      `,
      script: `
        const chatbot = MwaiAPI.getChatbot();
        chatbot.lock();
        document.getElementById('userForm').addEventListener('submit', function(event) {
          event.preventDefault();
          const name = document.getElementById('name').value;
          alert("Hi " + name + "!");
          chatbot.unlock();
        });
      `,
    }
  }
]);

add_filter("mwai_chatbot_blocks", function ($blocks, $args) {
  $randomId = uniqid();
  $blocks[] = [
    'id' => $randomId,
    'type' => 'content',
    'data' => [
      'html' => '<div>
        <p>The chatbot will be blocked until you type your name.</p>
        <form id="userForm">
          <label for="name">Name:</label>
          <input type="text" id="name" name="name" required><br><br>
          <button type="submit">Submit</button>
        </form>
      </div>',
      'script' => '
        const chatbot = MwaiAPI.getChatbot("' . $args['botId'] . '");
        chatbot.lock();
        document.getElementById("userForm").addEventListener("submit", function(event) {
          event.preventDefault();
          const name = document.getElementById("name").value;
          alert("Hi " + name + "!");
          chatbot.unlock();
          chatbot.removeBlockById("' . $randomId . '");
          chatbot.addBlock({ type: "content", data: { html: "Thank you!" } });
        });
      '
    ]
  ];

  return $blocks;
}, 10, 2);

Actions, Shortcuts & Blocks

Actions

How to create an Action

Shortcut

Message

Examples

Block

Content

Examples