https://github.com/danihre/presence-slidev

Repo for Deco Presence APP - Deco Hackaton IV
https://github.com/danihre/presence-slidev

Last synced: about 10 hours ago
JSON representation

Repo for Deco Presence APP - Deco Hackaton IV

• Host: GitHub
• URL: https://github.com/danihre/presence-slidev
• Owner: DaniHRE
• License: mit
• Created: 2023-11-03T15:48:33.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2023-11-06T12:09:19.000Z (about 1 year ago)
• Last Synced: 2024-04-15T05:46:29.855Z (7 months ago)
• Language: CSS
• Homepage: https://presence-slidev.vercel.app
• Size: 13 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  


    

  




  

    Optimize your e-commerce conversion with Realtime Social Proof emotional triggers

  





  Plug and play Sections, Handlers and Actions for your deco.cx Website.



## Installation

1. Install via decohub

2. Create a Presence App Block

**Presence is now ready to be configured.**

## Configuration

1. Setup the Presence handler and configure it to your needs.

Here is an example of how you would do that:

```bash

├── apps

├── components

├── islands

├── loaders

├── routes

  └── presence

    └── index.ts   <-- Create this file

├── sdk

├── sections

└── static

```

```ts

import { createPresenceHandler } from "apps/presence/infra/presenceRoom.ts"

export const handler = createPresenceHandler({});

```

For the default configuration, this already is it!

If you want to go deeper, Presence lets you hook into some events, like

when an error happens (useful for logging and metrics), 

or when the WebSocket server broadcasts messages to a room (useful for extending behavior).

Here is a more complex example:

```ts

export const handler = createPresenceHandler({

    onError: (e) => {

        someLogService.registerError(e);

    },

    onRoomStateChange: (room) => {

        otherRealtimeService.notifyStateChange(room.connections);

    }

});

```

2. Now you can use any Presence Section, and they will use the Presence handler to track all of the needed realtime logic.

For example, if you want to display the PresenceCounter section, 

that shows a counter of how much people are in the current page (Useful for Social Proof triggers),

you can use it like this:

```bash

├── apps

├── components

├── islands

  └── Presence

    └── PresenceCounter.tsx   <-- Create this file

├── loaders

├── routes

├── sdk

├── sections

└── static

```

```ts

export { type Props } from "apps/presence/sections/Presence/PresenceCounter.tsx";

export { default } from "apps/presence/sections/Presence/PresenceCounter.tsx";

```

Fresh will not let any external Deco App create an Island unless you explicitly 

re-export it in the Islands folder, so this step is needed for the component to work properly.

Thats about it for the PresenceCounter. Now when you open your Sections panel on `admin.deco.cx` you

will be able to add the PresenceCounter to any page, and configure it via Section Props.