[HTML] 채팅 기능 추가하기 (10step)

2022. 5. 29. 18:47

13단계로 HTML 웹페이지에 채팅 기능 추가하는 방법

# 사전 준비

(Github page 사용하는 방법 링크 - 작성예정)

# 채팅 기능 추가하는 방법

1. tawk 홈페이지 접속 (https://www.tawk.to/)

2. 로그인 (회원가입 필요)
- "SIGN UP FREE " 버튼을 클릭하여 간단한 회원가입을 함

3. 이메일 확인 (계정 활성화)
- 회원가입 시 입력한 이메일에 접속하여 받은메일함 확인
- 계정 활성화 필요

4. 사이트 생성 절차

1) 언어 선택

2) 웹사이트 정보 입력

3) 팀원 추가 및 권한 설정

4) 위젯 설치 (소스코드 제공)

5. 소스 코드 복사
- 빨간 네모로 마우스 커서를 위치하면 "클립보드에 복사" 버튼이 나타남.
- "클립보드에 복사" 클릭

6. 소스 코드 붙여넣기
- 작성된 코드에 붙여넣기

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Example</title>
  </head>
  <body>
    <h1><u>Example : Chatting</u></h1>
    <h2>Result</h2>

    <!--Start of Tawk.to Script-->
    <script type="text/javascript">
    var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
    (function(){
    var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
    s1.async=true;
    s1.src='https://embed.tawk.to/62932b4b7b967b117991ca2e/1g47e27mq';
    s1.charset='UTF-8';
    s1.setAttribute('crossorigin','*');
    s0.parentNode.insertBefore(s1,s0);
    })();
    </script>
    <!--End of Tawk.to Script-->
  </body>
</html>

7. 채팅 기능 오류
- 오류 발생 : Reconnecting. (다시 연결 중)
- 원인 : tawk.to 에서 제공한 소스 코드를 작성 중인 웹페이지에 작성하여 접속이 안됨. (로컬주소때문에 접속 안됨)
- 해결 : github 에서 page 생성하여 웹페이지에 접속할 수 있도록 함 (Github page 사용하는 방법 링크 - 작성예정)

8. github page를 이용하여 채팅 기능 사용
- Reconnecting 오류 해결

9. 채팅 입력 - 고객(Client)
- 회원 가입한 tawk.to 에서 대쉬보드를 미리 열어둔다. (https://dashboard.tawk.to/#/chat)
- 소리가 굉장히 요란하므로 볼륨을 낮추고 채팅치시길 바람.

10. 채팅 입력 - 관리자(Server)
- 회원 가입한 tawk.to 에서 대쉬보드를 미리 열어둔다. (https://dashboard.tawk.to/#/chat)
- 소리가 굉장히 요란하므로 볼륨을 낮추고 채팅치시길 바람.

1) 대쉬보드 확인 (고객으로부터 수신된 메시지 확인)
- 메시지 수신 확인 (빨간 네모 클릭)

2) 고객 채팅 참여하기

3) 채팅 입력

# 결과

- tawk.to 에서 채팅 기능을 할 수 있는 소스 코드를 제공받음.
- 채팅은 웹페이지에서 작은 아이콘으로 모서리에 위치함.
- 채팅으로 고객(Client)과 관리자(Server)간 의사소통할 수 있는 기능으로 활용가능

감사합니다.

잘못된 정보나 오타 및 수정사항이 있을 경우 댓글로 달아주시면 감사하겠습니다.

'GUI > HTML & CSS' 카테고리의 다른 글

[HTML] 웹페이지 방문자 분석 기능 추가하기 (10step) (0)	2022.05.29
[HTML] 댓글 기능 추가하기 (11step) (0)	2022.05.29
[HTML] 동영상 삽입하기 (0)	2022.05.29
[Atom] Atom Editor 사용방법 및 조작키 (updating) (0)	2022.05.27
[HTML] 태그 모음 (0)	2022.05.19

Manbedded