카카오톡 공유하기 메시지에서 변수를 사용해 동적 메시지 보내는 방법

미리보기

 

시작하기

메시지 템플릿 접속

https://developers.kakao.com/tool/template-builder/app

카카오계정

 

템플릿 생성

메시지 템플릿을 사용할 애플리케이션을 선택합니다.

 

메시지 템플릿 종류 선택

필자는 피드형(A)로 선택하였습니다.

 

템플릿 수정

${variable}

// title 변수 생성
ex) ${title}

필자는 제목과 본문을 고정값을 사용하지 않고 코드단에서 컨트롤하고 싶었습니다.

즉, 카카오톡 공유하기 실행 시 제목과 본문이 설정되도록 하고싶었습니다.

이에 제목과 본문란에 텍스트가 아닌 ${title}과 ${content} 변수를 입력했습니다.

 

템플릿 저장

 

템플릿 수정을 마쳤다면 저장합니다.

 

API 사용

  function shareMessage() {
    // @ts-expect-error - window.Kakao 타입이 전역에 정의되지 않음
    window.Kakao.Share.sendScrap({
      requestUrl: `${window.location.origin}/templates/${templateId}`, // 스크랩할 URL
      templateId: 120404, // 사용할 템플릿 ID(도구에서 확인 가능)
      templateArgs:{
        title: "테스트 타이틀", // 생성한 변수 값(${title})
        content: "테스트 컨텐츠 ", // 생성한 변수 값(${content})
      }
    });

 

 

 

추가

클릭 시 이동할 URL 동적 설정하기

마찬가지로 변수를 사용하여 클릭 시 이동할 URL을 동적으로 설정할 수 있습니다.

(템플릿 변경 후 저장 필수!)

 

참고자료

https://developers.kakao.com/docs/latest/ko/message-template/common#configuration-method

Kakao Developers