# Updating UI

This is a basic example of how you can use a web sockets service like Pusher to trigger UI updates when a change happens in a user's calendar.

The code samples assume a Rails app using the Cronofy and Pusher libraries.

## 1. Setup the web hook receiver
Create a controller to receive the webhook for a user. We're going to identify which user this relates to by passing a `user_id` parameter as part of the URL.

When a change notification is received from Cronofy, we then trigger a `calendar_changed` event on a Pusher Channel for the `user_id`.

```ruby
# config/routes.rb
post "/cronofy_webhooks/:user_id", to: 'cronofy_webhooks#create'

# app/controllers/cronofy_web_hooks
class CronofyWebhooksController < ApplicationController

  def create
    user_id = params[:user_id]
    Pusher.trigger(user_id, "calendar_changed", {})
  end
end
```

## 2. Open Cronofy Channel for the User
When the user is authorized, we add a channel that is configured to receive change notifications for that user.

```ruby
callback_url = cronofy_webhooks_url(user_id: user.id)
cronofy.create_channel(callback_url)
```

## 3. Listen for changes and reload the element
In the client code, we subscribe to the Pusher Channel for that user and bind a function to the `calendar_changed` event.

The function will call the `.update()` method on the Cronofy UI Element variable to reflect the latest changes.

```javascript
var availabilityViewer = CronofyElements.AvailabilityViewer({...});

var pusher = new Pusher('<%= Pusher.key %>', {
  encrypted: true
});

var userId = '<%= user.id %>';
var channel = pusher.subscribe(userId);
channel.bind('calendar_changed', function(data) {
  availabilityViewer.update();
});
```



---
[Read in HTML](https://docs.cronofy.com/developers/push-notifications/updating-ui/)