비개발자가 typebot을 임베딩해서 사용하는 여러가지 방법
우선 회사의 경우 IT 부서에 요청해서 제작한 typebot을 넘기고 원하는 곳에 임베딩 해 달라고 부탁하는 방법 (가장 쉽고 효과적)
카카오톡으로 공유하기 (가장 쉬운 방법)
카카오톡 채팅창 안에 설문 화면 자체를 심는 것은 기술적으로 불가능합니다(카카오 정책상).
대신 '링크'를 보내면 상대방이 클릭해서 들어오는 방식을 사용합니다.
스크린샷 왼쪽 상단 [Your typebot links] 박스 안에 있는 주소(
https://typebot.co/exam...) 옆의 [Copy] 버튼을 누르세요.카카오톡 채팅방에 붙여넣기(Ctrl+V) 하시면 됩니다.
팁: 상대방에게는 썸네일 이미지와 함께 링크가 전송되며, 클릭 시 설문 챗봇이 전 체 화면으로 열립니다.
노션(Notion)에 임베딩 (가장 추천하는 웹페이지 방식)
혹시 강의 자료나 공지 사항을 노션(Notion)으로 만드시나요? 노션은 비개발자가 웹페이지처럼 쓰기에 가장 좋습니다.
위와 동일하게 [Copy] 버튼을 눌러 링크를 복사합니다.
노션 페이지에서 빈 줄에 링크를 붙여넣기(Ctrl+V) 합니다.
나타나는 메뉴 중 [임베드 생성(Create embed)]을 클릭합니다.
결과: 노션 페이지 안에 챗봇 화면이 그대로 나타나며, 사람들은 노션을 나가지 않고도 바로 설문에 응답할 수 있습니다.
홈페이지/블로그에 넣기 (HTML & Javascript)
기존에 운영 중인 웹사이트(워드프레스, 아임웹 등)가 있다면, 스크린샷 중앙의 노란색 아이콘 [HTML & Javascript]를 사용하는 것이 정석입니다.
스크린샷의 [HTML & Javascript] 버튼을 클릭합니다.
두 가지 방식 중 하나를 선택하라고 나올 겁니다:
Standard (표준): 웹페이지의 특정 영역에 설문지가 박스 형태로 들어갑니다.
Bubble (버블): 홈페이지 우측 하단에 동그란 말풍선 버튼이 생기고, 누르면 채팅창이 열립니다. (일반적인 챗봇 스타일)
원하는 방식을 고르면 복잡한 영어 코드(스크립트)가 나옵니다. 그 코드를 [Copy] 하세요.
사용하시는 홈페이지 빌더(예: 아임웹, 윅스 등)의 관리자 화면에서 'HTML 코드 넣기' 또는 '임베드' 기능을 찾아 붙여넣기만 하면 됩니다.
Vibe coding으로 내가 만든 페이지에 넣기
방법 1. 둥둥 떠다니는 '버블 버튼'으로 넣기 (가장 추천 ⭐)
홈페이지 우측 하단에 카카오톡 상담 버튼처럼 동그랗게 떠 있는 방식입니다. 기존 레이아웃(디자인)을 전혀 건드리지 않아서 오류 날 확률이 거의 없습니다.
1단계: Typebot에서 코드 복사하기
보내주신 화면에서 [HTML & Javascript] 클릭
[Bubble]을 선택
나오는 코드를 [Copy]
2단계: Vibe Coding(AI)에게 명령하기 작업 중인 AI(Cursor, Replit, v0 등) 채팅창에 아래와 같이 입력하세요.
"내가 방금 챗봇 코드를 복사해왔어. 이 코드를 우리 웹사이트의 모든 페이지 우측 하단에 챗봇 버튼(Bubble)으로 뜨게 추가해줘. 디자인 깨지지 않게
<body>태그 닫히기 직전에 넣어주면 돼.[복사한 Typebot 코드를 여기에 붙여넣기]"
실제로 한 번 해봤습니다. 쉽게 되더라고요 ^^
제가 임의로 랜딩페이지 만들고 퍼널 마케팅용으로 구축해봤습니다.
아래 링크 타고 들어가서 확인해 보세요
치트코드 (CHEAT CODE) | 남성 외모 공략 솔루션
이러면 비개발자도 쉽게 임베딩해서 쓰면 됩니다.
IT부서에 요청할 때도 이 코드만 주면 되겠네요.
방법 2. 특정 위치에 '설문지 박스'로 박제하기
랜딩페이지 중간에 "문의하기" 섹션이나 "신청하기" 섹션처럼, 페이지의 일부분으로 큼지막하게 넣고 싶을 때 사용합니다.
1단계: Typebot에서 코드 복사하기
보내주신 화면에서 [HTML & Javascript] 클릭
[Standard]를 선택
나오는 코드를 [Copy]
2단계: Vibe Coding(AI)에게 명령하기 넣고 싶은 위치(예: Contact 섹션)를 콕 집어서 말해야 합니다.
"내 랜딩페이지 중간에 있는 [문의하기/Contact] 섹션 자리에 이 챗봇을 바로 보여주고 싶어. 사용자가 버튼을 누르지 않아도 바로 설문에 응답할 수 있게, 아래 코드를 해당 섹션 안에 적절한 크기로 삽입해줘.
[복사한 Typebot 코드를 여기에 붙여넣기]"
비개발자가 임베딩하는 길은 멀고도 험하군요 ㅎㅎ
