Actions, Shortcuts & Blocks

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.

Notion image
 

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.

Notion image

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:

Notion image

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

Notion image

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

Notion image

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) {
  // The block will be added only if the word 'block' is detected in the query or reply
  if (strpos($args['reply'], 'block') === false && strpos($args['newMessage'], 'block') === false) {
    return $blocks;
  }

  $blocks[] = [
    '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.setBlocks([{ type: "content", data: { html: "Thank you!" } }]);
        });
      '
    ]
  ];

  return $blocks;
}, 10, 2);
Did this answer your question?
😞
😐
🤩