# 채팅 관리자 페이지 (웹 대시보드용)

<figure><img src="https://684031119-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmsJj00k8mj8AcVpnn9Xs%2Fuploads%2F5NjRfnX0to2GcwXwfiGh%2F%EA%B5%AC%EB%B6%84%EC%84%A0.PNG?alt=media&#x26;token=31423ba2-5c39-4513-9b71-49ac018e5cf7" alt=""><figcaption></figcaption></figure>

채팅목록은 1:1채팅(관리자채팅)을 이용하시는 분들께 유용한 기능이에요.&#x20;

채팅방에서 앱 회원이 메시지를 보내면 채팅 관리자 페이지를 통해서 숫자 뱃지, 웹 알림 등으로 빠르게 내용을 확인할 수 있구요.

목록 페이지에서 회원들의 채팅 목록을 확인하여 직접 메시지를 주고 받을 수 있습니다.&#x20;

매뉴얼을 통해서 채팅 목록 메뉴를 이용하는 방법을 확인해주세요.

<figure><img src="https://684031119-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmsJj00k8mj8AcVpnn9Xs%2Fuploads%2F5NjRfnX0to2GcwXwfiGh%2F%EA%B5%AC%EB%B6%84%EC%84%A0.PNG?alt=media&#x26;token=31423ba2-5c39-4513-9b71-49ac018e5cf7" alt=""><figcaption></figcaption></figure>

## 1. 채팅 관리자 페이지 이동

![](https://wp.swing2app.co.kr/wp-content/uploads/2018/10/%EA%B4%80%EB%A6%AC%EC%9E%90-%EC%B1%84%ED%8C%85%ED%8E%98%EC%9D%B4%EC%A7%80.png)

스윙 홈페이지 접속 후  [**앱운영 페이지에서 → 서비스관리** ](http://www.swing2app.co.kr/view/admin_chatting)**→  채팅 관리자페이지** 로 이동합니다.&#x20;

<figure><img src="https://684031119-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmsJj00k8mj8AcVpnn9Xs%2Fuploads%2F5NjRfnX0to2GcwXwfiGh%2F%EA%B5%AC%EB%B6%84%EC%84%A0.PNG?alt=media&#x26;token=31423ba2-5c39-4513-9b71-49ac018e5cf7" alt=""><figcaption></figcaption></figure>

## 2. 채팅 목록

![](https://wp.swing2app.co.kr/wp-content/uploads/2018/10/%EA%B4%80%EB%A6%AC%EC%9E%90%EC%B1%84%ED%8C%85%ED%8E%98%EC%9D%B4%EC%A7%80new2.png)

**채팅 관리자 페이지에서 – 채팅 목록 으로 이동해주세요**.

1:1 채팅 목록 페이지가 열리구요.

해당 페이지에서 ★**사용자들과 주고 받은 채팅 목록을 확인하고, 직접 해당 페이지에서 대화를 주고 받을 수 있어요**.

<div align="left"><img src="https://s3.ap-northeast-2.amazonaws.com/swing2bucket/resource/image/help/501e2b073e3179fefc05518335da28ec.png" alt=""></div>

1\)목록 필터: 읽은 채팅 목록, 읽지 않은 채팅 목록을 선택하여 확인할 수 있습니다.\
2\)검색: 채팅을 했던 회원명, 회원 ID를 검색하여 회원을 찾아볼 수 있습니다.\
3\)앱 필터: 한 계정당 여러개의 앱을 가지고 있는 경우 앱을 선택해서 해당 앱에서 주고받은 채팅 목록을 확인할 수 있습니다.\
4\)공용/전용 필터: 공용채팅방 or 전용채팅방을 선택하여 필터링 할 수 있어요.\
\*공용: 일반 1:1 채팅방을 말합니다. (부관리자도 함께 채팅한 방도 포함됩니다.)\
\*전용: 앱 내의 ‘관리자 로그인’으로 로그인한 관리자가 앱에서 1:1 채팅을 한 경우 ‘전용’으로 필터링됩니다.\
5\)리스트 갱신: 새로고침과 같은 기능이에요. 채팅목록을 다시 갱신할 때 해당 버튼을 눌러주세요.\
6\)채팅방 나가기: 회원을 선택하고 ‘채팅방 나가기’를 하면 대화 내용이 삭제됩니다.

***

<figure><img src="https://684031119-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmsJj00k8mj8AcVpnn9Xs%2Fuploads%2F5NjRfnX0to2GcwXwfiGh%2F%EA%B5%AC%EB%B6%84%EC%84%A0.PNG?alt=media&#x26;token=31423ba2-5c39-4513-9b71-49ac018e5cf7" alt=""><figcaption></figcaption></figure>

## 3. 채팅 목록 기능

<div align="left"><img src="https://s3.ap-northeast-2.amazonaws.com/swing2bucket/resource/image/help/9bde13d64efa084d8bbe556856d87a7e.png" alt=""></div>

<mark style="color:orange;">**1) 알림 숫자 뱃지**</mark>

채팅방에서 사용자가 관리자에게 메시지를 보내면 **알림 숫자 뱃지가 표시됩니다.**

**메시지가 온 만큼 뱃지에 숫자가 자동으로 표시되구요.**

**메시지를 읽으면 숫자 뱃지는 사라집니다.**&#x20;

<mark style="color:orange;">**2) PC 알림 창**</mark>

채팅방에서 사용자가 관리자에게 메시지를 보내면 기존에는 앱에서만 푸시 알림이 발송되었는데요.

이제는 **PC 알림으로도 메시지 푸시 알림이 발송됩니다.**

**PC 화면 하단에 채팅방 메시지가 오면 알림창이 표시가 됩니다.**

\ <mark style="color:orange;">**3) 웹사이트 채팅방 개설**</mark>

<div align="left"><img src="https://s3.ap-northeast-2.amazonaws.com/swing2bucket/resource/image/help/4cf31405ee64937a401b0f5d2516bb7a.png" alt=""></div>

채팅 목록 페이지에서 **메시지가 온 회원을 선택하면 웹에서 바로 대화가 가능하도록 채팅창이 뜹니다.**

**관리자는 웹에서도 바로 사용자와 채팅을 이용할 수 있습니다.**&#x20;

(앱에서도 당연히 기존의 방법처럼 채팅 이용하실 수 있어요 ^^)

<mark style="color:red;">**★ 안내 사항**</mark>

**인터넷 환경 크롬(Chrome)에서만 알림 서비스를 제공합니다.**

**Internet Explorer(IE) 브라우저에서는 알림을 받을 수 없으니 유념해주세요\~!**

\
\ <mark style="color:purple;">**알림 숫자 뱃지, PC알림창 확인하기**</mark>

![](https://s3.ap-northeast-2.amazonaws.com/swing2bucket/resource/image/help/6801a505faff31d0e090b981ddad98cb.png)

<mark style="color:purple;">**웹에서 채팅방 실행하기**</mark>

![](https://s3.ap-northeast-2.amazonaws.com/swing2bucket/resource/image/help/791f5b0f06f783dc7d00417368182fa3.png)

<figure><img src="https://684031119-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmsJj00k8mj8AcVpnn9Xs%2Fuploads%2F5NjRfnX0to2GcwXwfiGh%2F%EA%B5%AC%EB%B6%84%EC%84%A0.PNG?alt=media&#x26;token=31423ba2-5c39-4513-9b71-49ac018e5cf7" alt=""><figcaption></figcaption></figure>

## 4. 앱에 1:1채팅을 적용하는 방법

마지막으로 1:1 채팅을 앱에 적용하는 방법을 알려드릴게요.

### <mark style="color:blue;">**1)앱제작 V3 버전 이용시**</mark>

<figure><img src="https://684031119-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmsJj00k8mj8AcVpnn9Xs%2Fuploads%2FC2poDZzS29Z4SldG7VVh%2F%EA%B4%80%EB%A6%AC%EC%9E%90%EC%B1%84%ED%8C%85.png?alt=media&#x26;token=4b6a5cda-bd18-45c8-af39-bc08d053a931" alt=""><figcaption></figcaption></figure>

앱제작 화면 이동

1\)STEP3 페이지 단계로 이동합니다.

2\)새 메뉴를 만들어주세요. (+ 모양 버튼 선택하여 메뉴 추가)

3\) 메뉴 이름 입력

4\) 페이지 디자인에서 \[기본 기능] -\[페이지]를 선택해주세요.&#x20;

5\) ‘관리자 채팅’ 페이지를 찾아서 \[적용하기] 버튼을 선택해주세요.&#x20;

(페이지에 마우스 커서를 가져다 대면 적용하기 버튼이 열립니다)

6\) 화면 상단 \[저장]버튼을 누르면 앱에 적용됩니다.&#x20;

### <mark style="color:blue;">**2)앱제작 V2 버전 이용시**</mark>

![](https://wp.swing2app.co.kr/wp-content/uploads/2018/10/%EA%B4%80%EB%A6%AC%EC%9E%90%EC%B1%84%ED%8C%85NEW1-1.png)

앱제작 페이지 – 페이지메뉴 단계로 이동합니다.

1\) \[카테고리 추가] 버튼 선택해서 새 메뉴를 만들어주세요.

2\) 메뉴명: 메뉴 이름을 입력합니다.

3\) 메뉴 유형에서 \[스윙 페이지] 선택

4\) \[링크마법사] 버튼을 선택합니다.

5\) 링크마법사 스윙 기능 창에서 \[관리자 채팅] 선택한 뒤,  \[반영] 버튼을 선택합니다.&#x20;

6\) \[적용] 버튼

7\) \[저장] 버튼 눌러주시면 완료됩니다.