# Grafana for Meetings

## Grafana + WebRTC Conferencing

We all love **Grafana**. Millions of teams worldwide are using it to analyze and visualize data from a myriad of sources - our team uses it to develop our [qryn](https://qryn.dev) stack all day.

Now what if we could use **Grafana** to meet and discuss about data _in real-time?_ 

> Why not?  🚀

Let's use **WebRTC** + iFrames to embed Conferencing capabilities into our Dashboards!

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1665654740657/z0Dztg4UK.png align="left")

### Requirements
- Login to your Grafana.com or local Grafana deployment
- Install the [HTML Panel Plugin](https://grafana.com/grafana/plugins/aidanmountford-html-panel/)

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1665654757696/HSUdE4QhO.png align="left")

#### Conference Panel Setup
- Select or Create a New Grafana Dashboard
- Add a new HTML Panel ([download](https://gist.githubusercontent.com/lmangani/fa66c8518adaf90ba2d549c0f4fdb99a/raw/6a74dc5cc1e45b67e3c02ca4cdcd5eaacae5e8d8/conference_panel.json) or follow manual instructions)
  - Add the following iframe `CSS`
```css
iframe {
  height: 100%;
  width:  100%;
  border: 0px;
  background: #FFF;
}
```
  - Last, add the `HTML` section with _either_ example below
> change `grafanarealtime` to your unique room name!

  1. **MEETHING RTCTZN** _(decentralized/p2p for small teams)_
```html
<iframe 
  width="100%" 
  height="100%" 
  src="https://rtctzn.com/?room=grafanarealtime" 
  allow="microphone; camera" >
</iframe>
```
  2. **JITSI Meet** _(centralized/sfu for large teams)_
```html
<iframe 
  width="100%" 
  height="100%" 
  src="https://meet.jit.si/grafanarealtime" 
  allow="microphone; camera" >
</iframe>
```

You can use any WebRTC service, as long as it allows iframe embedding.

#### We can even have a meeting **[RIGHT NOW](https://rtctzn.com/?room=grafanarealtime)**
_This is not an image. It's a real p2p meeting with others on this page._
<iframe src="https://rtctzn.com/?room=grafanarealtime" width=100% height=500  allow="microphone; camera"></iframe>
☝️☝️☝️ _for audio and video [open in a new tab](https://rtctzn.com/?room=grafanarealtime)_

> That's All!

Go ahead and invite your colleagues to your new **Real-Time Conferencing Dashboard**

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1665654740657/z0Dztg4UK.png align="left")