티스토리 뷰

티스토리 채팅창 만들기 - Chatbox

티스토리 채팅창 만들기 - Chatbox

큰일 할 남자 블로그 사이드바 스크롤을 내리다 보면 조그마한 채팅창이 있습니다.


댓글은 각각의 포스팅에 작성할 수 있으므로 한정적으로만 보여지는 데에 비해


채팅창어느 페이지든 항상 사이드바에 표시되기 때문에 접근성이 뛰어날 거로 생각해 추가했습니다.


그동안 제법 많은 분이 채팅창에 관심을 두고 질문을 주셔서 답변을 드렸는데


채팅창 추가하는 방법에 대한 포스팅을 미루고 미루다 이제서야 합니다.


이미 코드를 만들어주는 사이트가 있으므로 누구나 쉽게 채팅방을 생성할 수 있으며


HTML 코드만 수정할 수 있다면 어느 블로그든 간단하게 채팅창을 추가할 수 있습니다.




Smart Chatbox 설정

1. http://www.smartchatbox.com/ 를 클릭해 '스마트 쳇박스'로 이동한 후


하단 Create SmartChatbox를 클릭합니다.


채팅창 만들기

2. Email과 Password를 입력하고 회원가입을 진행합니다.


채팅방 만들기

3. 회원 가입 후 별도의 인증 절차 없이 바로 채팅방 설정 창으로 넘어가게 됩니다.


위 이미지를 참고해 채팅창의 옵션을 설정합니다.


실시간 채팅 추가하기

4. 옵션을 바꿀 때마다 하단에서 변경된 채팅창을 확인할 수 있습니다.


5. 설정을 다 했다면 가장 하단에서 채팅창을 관리할 관리자를 생성한 후


Generate code of my smart chatbox를 클릭합니다.


6. 세부 옵션을 설정하는 창으로 이동됩니다.


위 이미지를 참고해 세부 옵션을 설정한 뒤 Finish를 클릭합니다.


7. 모든 옵션을 설정하고 Finish 버튼을 누르면 위 사진과 같이 짧은 코드가 하나 생성됩니다.


코드 전체를 복사한 후 티스토리 관리자 창으로 이동합니다.


티스토리 HTML 수정

8. 꾸미기 - 사이드바 - HTML 배너출력 + - 편집을 클릭합니다.


9. HTML 소스 칸에 아까 복사했던 채팅창 코드를 입력하고 확인을 누릅니다.


그 후 저장 버튼을 누르고 블로그로 돌아가 채팅창이 제대로 추가되었는지 확인합니다.




본 포스팅과 관련된 피드백은 언제든 환영합니다.


또한 궁금한 점이 있다면 댓글 남겨주시면 성실히 답변드리도록 하겠습니다.


감사합니다.

댓글
댓글쓰기 폼