# Beep actiontype

**URL:** <https://discuss.elastic.co/t/beep-actiontype/273851>\
**Category:** Kibana\
**Created:** [May 24, 2021, 4:47pm UTC](https://discuss.elastic.co/t/beep-actiontype/273851 "2021-05-24T16:47:17Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![lstoneir](https://avatars.discourse-cdn.com/v4/letter/l/b9bd4f/32.png) [@lstoneir](https://discuss.elastic.co/u/lstoneir)\
**Post date:** [May 24, 2021, 4:47pm UTC](https://discuss.elastic.co/t/beep-actiontype/273851/1 "2021-05-24T16:47:17Z")

</div>

I have added a new actionType to my kibana source.  
I register it in both server and client side

 ![Screenshot_2021-05-24 Connectors - Elastic](https://us1.discourse-cdn.com/elastic/original/3X/8/8/88bd80e983427d65cda8e8c1b665dd2544699096.png)

my action id is : .beep  
at this moment i log a message in file. but i want to play a beep sound in my kibana.  
how can i call a function in public (client-side) to play a `Audio('beep.mp3').play()` ?  
any idea?

Please help 🙂

---

<div class="post-metadata">

**Author:** ![lstoneir](https://avatars.discourse-cdn.com/v4/letter/l/b9bd4f/32.png) [@lstoneir](https://discuss.elastic.co/u/lstoneir)\
**Post date:** [May 25, 2021, 10:21am UTC](https://discuss.elastic.co/t/beep-actiontype/273851/2 "2021-05-25T10:21:47Z")

</div>

Any idea for this?

How can call a function inside header component for playing Audio?!

---

<div class="post-metadata">

**Author:** ![lukeelmers](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/lukeelmers/32/35230_2.png) [@lukeelmers](https://discuss.elastic.co/u/lukeelmers)\
**Post date:** [May 26, 2021, 10:59pm UTC](https://discuss.elastic.co/t/beep-actiontype/273851/4 "2021-05-26T22:59:39Z")

</div>

> [@lstoneir](#):
>
> how can i call a function in public (client-side) to play a `Audio('beep.mp3').play()` ?  
> any idea?

If you need to store a static asset like an mp3 file, you can place it in your plugin inside a `myplugin/public/assets` directory. Any files living in that directory will be served from `/plugins/my_plugin_id/assets`

---

<div class="post-metadata">

**Author:** ![lstoneir](https://avatars.discourse-cdn.com/v4/letter/l/b9bd4f/32.png) [@lstoneir](https://discuss.elastic.co/u/lstoneir)\
**Post date:** [May 27, 2021, 5:59pm UTC](https://discuss.elastic.co/t/beep-actiontype/273851/5 "2021-05-27T17:59:56Z")

</div>

thanks for your attention \<3  
i have another question.  
and how can i inject my plugin client-side in header area? for example a highlighted bell for attention of operator!

very thank you 💓

---

<div class="post-metadata">

**Author:** ![lukeelmers](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/lukeelmers/32/35230_2.png) [@lukeelmers](https://discuss.elastic.co/u/lukeelmers)\
**Post date:** [June 22, 2021, 6:39pm UTC](https://discuss.elastic.co/t/beep-actiontype/273851/6 "2021-06-22T18:39:03Z")

</div>

> [@lstoneir](#):
>
> how can i inject my plugin client-side in header area? for example a highlighted bell for attention of operator

Kibana's core exposes a few options for this which are available to all plugins.

The closest to what you describe is probably `setBadge`, which will let you add a badge to the upper-right corner of the screen, below the black global navigation bar, with an optional tooltip.

```javascript
// my-plugin/public/plugin.ts
class MyPlugin {
  start(core) {
    core.chrome.setBadge({
      text: 'Attention',
      tooltip: 'Something has happened',
      iconType: 'alert', // icon name from EUI: https://elastic.github.io/eui/#/display/icons
    });
  }
}

```

Core also has an `overlays` service that lets you display banners:

```javascript
// my-plugin/public/plugin.ts

import React from 'react';
import { toMountPoint } from '../../../../../../src/plugins/kibana_react/public';
import { MyBannerComponent } from '../banner';

class MyPlugin {
  start(core) {
    core.overlays.banners.add(
      toMountPoint(<MyBannerComponent /)
    );
  }
}

```

And lastly there's a `notifications` service which displays popups, usually in the lower right corner of the screen:

```javascript
// my-plugin/public/plugin.ts
class MyPlugin {
  start(core) {
    core.notifications.toasts.addInfo({
      title: 'Attention',
      text: 'Something has happened'
    });
  }
}

```

Those are the main options I can think of. At the moment we don't have a way to completely override the header banner, so `chrome.setBadge` is probably the closest thing to what you describe that I can think of at the moment.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [July 20, 2021, 6:39pm UTC](https://discuss.elastic.co/t/beep-actiontype/273851/7 "2021-07-20T18:39:27Z")

</div>

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.