HRD 자동화 2탄 | Typebot을 카톡과 안드로이드 앱에 넣어보자

소개

Typebot으로 만든 설문조사를 카톡방에 넣고, 안드로이드 앱에서도 설문이 가능하게 하고 싶었습니다. 임베딩을 썼습니다.

타입봇을 이렇게 많은 곳에 넣을 수 있답니다~!

일단, 카톡방에 넣고 싶어서 Script로 해봤습니다.

그냥 Typebot 링크를 주는 것과 다른 점은 버튼을 넣을 수 있습니다.

예를 들어, 설문 시작, 카톡방으로 돌아가기 같은 것입니다.

먼저 Script를 클릭해서 내용을 확인합니다.

어떤 형태로 넣을 것인지 결정합니다.

그러고 나면 어떤 소스 코드를 써야 하는지가 나옵니다.

안드로이드 앱 스터디 운영 시에 쓸 Typebot 두 개를 Script에 임베딩합니다.

이 소스를 복사해서 ChatGPT에 넣고, 소스 코드를 달라고 합니다.

결과로 나온 HTML 파일을 적당히 typebot.html로 저장한 후 GitHub Pages를 통해 웹에 게시했습니다.

새 Repo를 public으로 만들고, typebot.html을 올린 후, Settings → Pages → Deploy에서 게시했습니다.

주소는 이렇게 나옵니다.

그리고 카톡에 이 URL을 주면 이렇게 실행됩니다.

위의 것은 팝업으로 연동한 것이고, 아래 것은 Standard로 연동했습니다.

기본적인 임베딩을 해 봤으니, 이제 안드로이드 앱에 연동해봤습니다.

FlutterFlow를 클릭하면 이렇게 연동하는 법이 나옵니다. 웹뷰는 앱 안에 웹페이지를 그대로 띄워주는 기술입니다.

클로드 코드에 이 화면을 찍어서 요청해봤습니다. 클코에 이미지 첨부는 Alt + V로 했습니다.

안드로이드 앱은 React Native로 만든 앱입니다.

금방 구현되어서 확인해봤습니다.

UI 정렬은 조금 다듬어야겠지만, 설문조사가 잘 됩니다.

결과까지 잘 들어옵니다.

타입봇을 다른 곳에 넣는 것이 이렇게 쉽군요~!

재미있게 설문을 받을 수 있으니 너무 좋습니다~!