본문출처 : 💬 WidgetBot - 디스코드 채팅 방을 블로그에 달자! (tistory.com)
디스코드 오픈 채팅 위젯을 블로그에 달아봅시다
블로그를 이용하는 사람과 바로바로 디스코드로 대화할 수 있게, 디코 채팅방을 블로그에 달고 싶다는 생각 하신 적 있나요? 그런 생각을 하신적 없으셔도 상관없습니다. 어쨌든 디스코드 봇인 위젯 봇(WidgetBot)을 이용하면 할 수 있으니까요. 실시간으로 문의를 받아야 하는 블로그에 유용할 듯한 기능입니다.
위젯 봇 기능 미리보기
사실 여러분은 위젯 봇의 기능을 이미 보고 있습니다. 제 블로그 왼쪽 아래의 동그란 디스코드 아이콘을 클릭해주세요.
(만약 보이지 않는다면 에드블락과 같은 광고 차단 기능을 꺼주세요)
그러면 다음과 같이 채팅창이 뜹니다. 한번 시험해보세요!
확대했을 때는 이런식으로 보여요
위젯 봇 설치하기 (WidgetBot 사용법)
위젯 봇 공식 사이트 : widgetbot.io/
이제 이러한 디코 채팅방 위젯을 다는 법에 대해 알아봅시다. 먼저 위젯 봇을 초대하셔야 합니다. 아래 링크를 클릭하시면 봇 추가 창이 뜨게 됩니다. 봇 추가방법에 대해 아직 익숙하지 않으신 분들은 이 글을 봐주세요.
봇 추가 링크 : https://add.widgetbot.io/
그 후부터 약간 복잡합니다. 잘 따라와 주세요. 첫 화면에 보이고 싶은 디스코드 채널에 들어간 다음 ??crate를 입력해주세요. 그러면 다음과 같이 HTML 코드가 나오게 됩니다.
추가) 만약 ??crate를 해도 아무 반응이 없다면 WidgetBot에게 관리자 권한을 줘보세요!
html 코드가 나오셨다면 겁먹지 마시고 일단 이 HTML 코드를 복사해 주세요.
이제 이 HTML 코드를 HEAD 부분에 붙여 넣어주셔야 하는데, 티스토리 블로그를 쓰시는 분 기준으로 말씀드릴게요. 일단 설정에 스킨 편집으로 들어가 주세요.
그 후 화살표가 가리키는 쪽의 html 편집을 눌러주세요.
그러면 이런 식의 코드가 나오는데, 겁먹지 말고 그대로 따라 해주시면 돼요. 파란색으로 동그라미 친 부분 (<HEAD>, </HEAD>) 보이시나요? 그 부분이 바로 HEAD의 시작과 끝을 알리는 표시입니다. 따라서 빨간색 상자를 친 부분이 HEAD가 되고, 이 안에다가 아까 복사한 코드를 넣어주시면 돼요. 아까 복사한 코드가 저는 이미 들어 있는 모습이 보이시나요?
덮어서 붙여넣어서 다른 코드가 사라지면 안 되니 저처럼 이렇게 </HEAD> 바로 위에다가 빈 줄 하나를 만들어두고 거기다가 붙여넣어 주세요.
다 붙여넣으셨으면 화면의 새로 고침 버튼을 눌러 확인해보세요. 만약 이상해졌으면 왼쪽 방향 화살표(←)를 눌러 저장하지 않고 뒤로 가주세요. 적용이 잘 되었으면 적용 버튼을 눌러주세요.
만약 여기서 안 되는 부분이 있으면 댓글로 물어봐 주시거나 디스코드로 물어봐 주세요! 디스코드로 물어봐 주시면 바로바로 대답해 드립니다.
게스트 모드(guest mode) 설정하기
이렇게 만들어진 채팅창에는 한 가지 단점이 있습니다. 디스코드 계정이 없으신 분들은 계정을 만들어야 사용이 가능하고, 있으신 분들은 로그인을 해야 사용 가능하다는 점인데요. 다행히도 게스트 모드를 설정하면 닉네임만 입력 후 채팅이 가능합니다.
게스트 모드를 설정하는 방법은 아까 위젯으로 보이기로 한 채널에 들어가서 ??guestmode를 쳐주시면 됩니다.
그러면 다음과 같이 게스트는 채팅에 들어가기 전에 닉네임만 입력하고 들어올 수 있습니다!
추가1) 위젯봇이 오류가 일어날 경우
다음과 같이 디코 위젯 봇이 Error loading messages나 Channel unabailable, guild unabailable 경고 문구를 띄울 경우에는 사이트를 한 번 껐다가 켜주시면 잘 작동합니다.
https://discord.link/feedbackblog
그래도 되지 않는다면 봇이 오프라인 상태일 가능성이 있으니 직접 서버에 들어와서 물어봐주세요!
추가2) 위젯봇 위에 메시지 띄우기
이 블로그처럼 디스코드 위젯봇 위에 알림 문구를 띄우려면 코드를 아래와 같이 바꾸시면 됩니다.
코드 마지막에 crate.notify('띄우고 싶은 메시지')를 붙여주세요.
마치며
지금까지 위젯봇을 이용하여 디스코드 채팅 채널을 블로그에 다는 법에 대해 알아봤습니다. 이 봇으로 할 수 있는 여러 가지 커스터마이징 등 추가 기능은 제 블로그의 글을 기다리거나 여기를 봐주세요.
