# Enabling User Actions

By making use of the [`onMessage`](/integrations/build-an-integration/main/onmessage.md) hook and the [`sendIntegrationMessage`](/integrations/build-an-integration/customizing-the-overlay-window/component-file.md#sendintegrationmessage-payload) utility you can allow user's to trigger actions right from your integration in the overlay window.

To begin, you need to create a way for the user to trigger an action. In your handlebars template we can do this by adding a button that triggers an action "doSomething" on our component file.

{% code title="templates/block.hbs" %}

```markup
<button {{action "doSomething"}}>Click Me!</button>
```

{% endcode %}

On the component file, we then need to add a function that is run when the action `doSomething` is triggered by a user clicking on the "Submit" button we created.

{% code title="components/block.js" %}

```javascript
polarity.export = PolarityComponent.extend({
    message: '',
    actions: {
        doSomething: function (type) {
            let self = this;

            // The payload can contain any properties as long as you send a 
            // javascript object literal (POJO)
            let payload = {
              type: 'doSomething',
              action: 'Button Clicked'
            };

            // This is a utility method that will send the payload to the server 
            //where it will trigger the integration's `onMessage` method
            this.sendIntegrationMessage(payload).then(function (response) {
                // We set the message property to the result of response.reply
                self.set('message', response.reply);
            }).catch(function (err) {
                // If there is an error we convert the error into a string 
                // and append it to the string ERROR!
                self.set('message', "ERROR! " + JSON.stringify(err));
            });
        }
    }
});
```

{% endcode %}

The `sendIntegrationMessage` here will send the payload `{action: 'Button Clicked'}` to the integration's `onMessage` method implemented on the `integration.js` file running on the server.

On the server, you should listen for the message coming from the component using the `onMessage` hook.

{% code title="integration.js" %}

```javascript
let counter = 0;
function onMessage(payload, options, cb) {
    if(payload.type === 'doSomething'){
        cb(null, {
            reply: "Hello World! " + (++counter)
        });
    }else{
        // we must always call the `callback` and return an empty object
        cb(null, {});
    }
}
```

{% endcode %}

The `onMessage` implementation above simply responds back to the component with the message "Hello World!" with a server incremented counter appended to it.

After setting up your `onMessage` function within the `integration.js` file on the server, you will need to export the function so the Polarity Server is able to run it:

{% code title="integration.js" %}

```javascript
module.exports = {
   doLookup,
   startup,
   onMessage
}; 
```

{% endcode %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.polarity.io/integrations/recipes/enabling-user-actions.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.