플러스친구

플러스친구 플러그인은 간편하게 플러스친구 추가하기와 1:1 채팅 기능을 사용할 수 있게 도와줍니다.

시작하기 전에

  • 시작하기 과정에 따라 앱과 사이트 도메인을 등록해야 합니다.
  • 예제의 'YOUR APP KEY'를 등록한 앱의 JavaScript 키로 변경해 주세요.
  • 플러스친구 버튼 이미지는 여기에서 다운로드 할 수 있습니다.

예제: 플러스친구 추가 버튼 생성하기

웹페이지에 플러스친구 친구추가 버튼을 생성합니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width"/>
<title>PlusFriend Add Friend Button Demo - Kakao JavaScript SDK</title>
<script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>

</head>
<body>
<div id="plusfriend-addfriend-button"></div>
<script type='text/javascript'>
  //<![CDATA[
    // 사용할 앱의 JavaScript 키를 설정해 주세요.
    Kakao.init('YOUR APP KEY');
    // 플러스친구 친구추가 버튼을 생성합니다.
    Kakao.PlusFriend.createAddFriendButton({
      container: '#plusfriend-addfriend-button',
      plusFriendId: '_xcLqmC' // 플러스친구 홈 URL에 명시된 id로 설정합니다.
    });
  //]]>
</script>

</body>
</html>

위 예제의 데모를 바로 확인해 보세요! 데모 보러가기

플러스친구와 관련된 자세한 내용이 궁금하다면? Kakao.PlusFriend 레퍼런스

예제: 동적으로 플러스친구 추가하기

플러스친구 추가 팝업창을 직접 엽니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width"/>
<title>PlusFriend Add Friend Button Demo - Kakao JavaScript SDK</title>
<script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>

</head>
<body>
<a href="javascript:void addPlusFriend()">
  <img src="https://developers.kakao.com/assets/img/about/logos/plusfriend/friendadd_small_yellow_rect.png"/>
</a>
<script type='text/javascript'>
  //<![CDATA[
    // 사용할 앱의 JavaScript 키를 설정해 주세요.
    Kakao.init('YOUR APP KEY');
    function addPlusFriend() {
      Kakao.PlusFriend.addFriend({
        plusFriendId: '_xcLqmC' // 플러스친구 홈 URL에 명시된 id로 설정합니다.
      });
    }
  //]]>
</script>

</body>
</html>

위 예제의 데모를 바로 확인해 보세요! 데모 보러가기

플러스친구와 관련된 자세한 내용이 궁금하다면? Kakao.PlusFriend 레퍼런스

예제: 플러스친구 1:1 채팅 버튼 생성하기

웹페이지에 플러스친구 1:1 채팅 버튼을 생성합니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width"/>
<title>PlusFriend Chat Button Demo - Kakao JavaScript SDK</title>
<script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>

</head>
<body>
<div id="plusfriend-chat-button"></div>
<script type='text/javascript'>
  //<![CDATA[
    // 사용할 앱의 JavaScript 키를 설정해 주세요.
    Kakao.init('YOUR APP KEY');
    // 플러스친구 1:1채팅 버튼을 생성합니다.
    Kakao.PlusFriend.createChatButton({
      container: '#plusfriend-chat-button',
      plusFriendId: '_xcLqmC' // 플러스친구 홈 URL에 명시된 id로 설정합니다.
    });
  //]]>
</script>

</body>
</html>

위 예제의 데모를 바로 확인해 보세요! 데모 보러가기

플러스친구와 관련된 자세한 내용이 궁금하다면? Kakao.PlusFriend 레퍼런스

예제: 동적으로 플러스친구 1:1 채팅 시작하기

플러스친구 1:1 채팅을 시작합니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width"/>
<title>PlusFriend Chat Button Demo - Kakao JavaScript SDK</title>
<script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>

</head>
<body>
<a href="javascript:void plusFriendChat()">
  <img src="https://developers.kakao.com/assets/img/about/logos/plusfriend/consult_small_yellow_pc.png"/>
</a>
<script type='text/javascript'>
  //<![CDATA[
    // 사용할 앱의 JavaScript 키를 설정해 주세요.
    Kakao.init('YOUR APP KEY');
    function plusFriendChat() {
      Kakao.PlusFriend.chat({
        plusFriendId: '_xcLqmC' // 플러스친구 홈 URL에 명시된 id로 설정합니다.
      });
    }
  //]]>
</script>

</body>
</html>

위 예제의 데모를 바로 확인해 보세요! 데모 보러가기

플러스친구와 관련된 자세한 내용이 궁금하다면? Kakao.PlusFriend 레퍼런스


Last Modified : 2018-07-24