문의 시, 사용하시는 SDK 버전 정보와 디벨로퍼스 앱ID를 알려주세요.
window.Kakao.Share.sendDefault({
objectType: "text",
text: `안녕하세요. 무엇을 도와드릴까요?\n- 이전 페이지: ${previousUrl}`,
link: {
mobileWebUrl: previousUrl,
webUrl: previousUrl,
},
형태로 구현하려고 하는데 카카오톡 채널방 입장후 메세지가 전달되지 않습니다.
sendDefault는 추가로 템플릿 ID가 필요 없는 걸로 알고 있습니다.
단순 메세지 추가 전달을 위해 조건이 필요한게 있을까요?
안녕하세요.
확인을 위해 앱 ID 부탁드립니다.
앱ID
https://developers.kakao.com/ 의 내 애플리케이션에 표시되는 ID 값 입니다.
숫자로된 ID 입니다
ex) 123456
Kakao.Share.sendDefault는 웹페이지에서 카카오톡 공유하기용 기능이라 채널과는 무관한 기능입니다.
확인 부탁드려요.
31053 입니다.
그럼 위에 이미지처럼 이전페이지 링크를 추가하려면 어떤 함수 혹은 어떤 방식으로 접근해야될까요?
네 해당 링크는 참고하였는데, 조금 더 도움을 주실 수는 없을까요?
웹에서 리다이렉트 페이지를 구현하여,
ref를 전달하고 있습니다.
"use client";
import { useSearchParams } from "next/navigation";
import { useEffect } from "react";
declare global {
interface Window {
Kakao: any;
}
}
const KakaoRedirect = () => {
const searchParams = useSearchParams();
const ref = searchParams.get("ref");
const source = searchParams.get("source");
useEffect(() => {
const previousUrl = ref ? decodeURIComponent(ref as string) : "https://web.babitalk.com";
console.log("설정된 이전 페이지 URL:", previousUrl);
if (!window.Kakao) {
console.error("Kakao SDK 로드 실패");
return;
}
if (!window.Kakao.isInitialized()) {
window.Kakao.init(env.KAKAO_API_KEY);
}
window.Kakao.Channel.chat({
channelPublicId: "_HSZxhxl",
});
setTimeout(() => {
try {
console.log("카카오톡 자동 메시지 전송 시도...");
window.Kakao.Share.sendDefault({
objectType: "text",
text: `안녕하세요. 무엇을 도와드릴까요?\n- 이전 페이지: ${previousUrl}`,
link: {
mobileWebUrl: previousUrl,
webUrl: previousUrl,
},
});
console.log("카카오톡 자동 메시지 전송 성공");
} catch (error) {
console.error("카카오톡 자동 메시지 전송 실패:", error);
}
}, 1500);
const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
const kakaoAppChatUrl = `kakaoplus://plusfriend/chat/_HSZxhxl?ref=${encodeURIComponent(previousUrl)}`;
const kakaoWebChatUrl = `https://pf.kakao.com/_HSZxhxl/chat?ref=${encodeURIComponent(previousUrl)}&source=${source}`;
if (isMobile) {
window.location.href = kakaoAppChatUrl;
// 앱이 설치되지 않은 경우, 웹 채널로 이동
setTimeout(() => {
window.location.href = kakaoWebChatUrl;
}, 1500);
} else {
// PC에서는 웹 채널로 이동
window.location.href = kakaoWebChatUrl;
}
}, [ref, source]);
return <p>카카오톡 채널로 이동 중...</p>;
};
export default KakaoRedirect;
(1) Kakao.Share.sendDefault 는 카카오톡 공유 기능이라 무관한 기능이구요.
(2) 앞서 안내드린 기능도 채널 채팅 시작하기 기능으로 아래 가이드 참고하셔서 구현하시면됩니다.
단지 채널 상담 채팅 시작하며 웹에서 진입한 경우 이전 URL을 표시합니다.
이전URL은 변경할 수 있는 값이 아니라 브라우저 헤더 레퍼러를 표기합니다.
참고 부탁드려요.
확인해보시고 필요한 부분 있으시면 댓글 주세요~
위 댓글 한번 봐주시면 감사하겠습니다.
안녕하세요.
네, 맞습니다. 1:1 채팅이 적용되어 있거나 자동답변 할 수 있는 챗봇이 구축되어 있으면 이용자가
웹페이지에서 채널 채팅하기 했을때, 채널 채팅창에 이전 페이지 URL이 표시됩니다.
안녕하세요. 제가 구현을 하다보니, 각 n개의 파트너 채널로 이전 url을 보내야되는 상황인 걸 인지하였는데,
referer={url}을 넘긴다하더라도, 각 채널의 진입하는 경우 이전메세지를 보여주지 않는 케이스들이 있다는걸 확인헀습니다.
현재 제가 파악한 바로는,
https://developers.kakao.com/ 사이트 도메인이 추가되어야하고,
카카오비즈니스 자동응답메세지 설정이 필요한걸로 파악했습니다.
그럼 n개 파트너들이 Javscript sdk Url을 받기위해서는 이런 세팅을 해줘야지만 가능한 구현이 맞을까요?
해당 부분에 대해 고려할점이 맞는지 한번 확인 부탁드립니다.
윗 댓글 확인 한번 부탁 드립니다.
안녕하세요.
우선, 이전URL은 설정하셔서 넘기는 개념이 아니라 “채널 채팅하기” 호출한 페이지의 URL이 표기되는 방식인데요. 이부분 인지 하고 계실까요?
카카오톡 채널 채팅 시, 이전 url을 함께 보낼 수 있나요?
**모바일 웹페이지(브라우저)**에서 JavaScript SDK 를 이용해 채팅 이동하는 경우
모바일 앱의 웹뷰에서 JavaScript SDK 를 이용해 채팅 이동하는 경우
**PC 웹페이지(브라우저)**에서 JavaScript SDK 를 이용해 채팅 이동하는 경우
위와 같이 하시면 별도 설정 없이 “채널 채팅하기 버튼” 클릭한 웹페이지 URL이 전달됩니다.
n개 파트너들이 제공하는 각기 다른 페이지에서 “채널 채팅하기 버튼” 클릭하면 각기다른 이전 url이 표시되어야 정상 동작입니다.
확인 부탁드려요.
(이전메세지를 보여주지 않는 케이스에 해당하는 웹페이지 알려주시면 추가 확인 해보겠습니다.)
