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.

If you don’t want to code any of this to get Shortcuts in your chatbot you can use the Quick Actions add-on!

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.

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 just some HTML code that can be pushed either by the server-side or directly in JS via the MwaiAPI (setBlocks). A block also comes with script, so you can use custom logic and lock the chatbot if you want to. For instance, it could force a user to enter some data before continuing.

If you don’t want to code any of this to get Blocks in your chatbot you can use the Visitor Form add-on!

Content

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);