이지우 - 사용자 친구톡 소개 페이지 생성
This commit is contained in:
JIWOO
parent
73e5a05114
commit
715cec51a5
@ -188,6 +188,29 @@ public class KakaoStepInfoController {
|
||||
return "/web/kakao/intrd/KakaoAllimtalkIntro";
|
||||
}
|
||||
|
||||
/**
|
||||
* @Method Name : kakaotalkIntrdView
|
||||
* @Project : mjon
|
||||
* @Date : 2025. 8. 21
|
||||
* @작성자 : 원영현
|
||||
|
||||
* @프로그램 설명 :카카오 알림톡, 친구토 통합 소개페이지
|
||||
*/
|
||||
@RequestMapping(value= {"/web/mjon/kakao/alimtalk/kakaotalkIntrdView.do"})
|
||||
public String kakaotalkIntrdView(HttpServletRequest request,
|
||||
@ModelAttribute("searchVO") BoardMasterVO boardMasterVO, ModelMap model , BoardVO boardVO ,
|
||||
RedirectAttributes redirectAttributes) throws Exception {
|
||||
|
||||
LoginVO loginVO = EgovUserDetailsHelper.isAuthenticated()? (LoginVO)EgovUserDetailsHelper.getAuthenticatedUser():null;
|
||||
String userId = loginVO == null ? "" : EgovStringUtil.isNullToString(loginVO.getId());
|
||||
if(userId == "") {
|
||||
return "redirect:/web/user/login/login.do";
|
||||
}
|
||||
model.addAttribute("loginVO", loginVO);
|
||||
|
||||
return "/web/kakao/intrd/KakaotalkIntro";
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* XSS 방지 처리.
|
||||
|
||||
@ -1559,7 +1559,8 @@ function actionLogin_end(){
|
||||
<li><a href="<c:out value='/web/mjon/alimtalk/kakaoAlimtalkMsgDataView.do'/>">알림톡</a></li>
|
||||
<li><a href="<c:out value='/web/mjon/kakao/friendstalk/kakaoFriendsTalkMsgDataView.do'/>">친구톡</a></li>
|
||||
<li><a href="<c:out value='/web/mjon/kakao/stepinfo/selectKaKaoStepInfo.do'/>" >카카오톡 설정</a></li>
|
||||
<li><a href="<c:out value='/web/mjon/kakao/alimtalk/kakaoAlimtalkIntrdView.do'/>" >알림톡 소개</a></li>
|
||||
<%-- <li><a href="<c:out value='/web/mjon/kakao/alimtalk/kakaoAlimtalkIntrdView.do'/>" >알림톡 소개</a></li> --%>
|
||||
<li><a href="<c:out value='/web/mjon/kakao/alimtalk/kakaotalkIntrdView.do'/>" >카카오톡 소개</a></li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
@ -60,9 +60,9 @@ function fnLinkPageTopTab(tabInfo){
|
||||
|
||||
url = "<c:url value='/web/mjon/kakao/friendstalk/kakaoFriendsTalkMsgDataView.do'/>";
|
||||
|
||||
}else if(tabInfo == 'tabAlimtalkIntrd'){
|
||||
}else if(tabInfo == 'tabKakaotalkIntrd'){
|
||||
|
||||
url = "<c:url value='/web/mjon/kakao/alimtalk/kakaoAlimtalkIntrdView.do'/>";
|
||||
url = "<c:url value='/web/mjon/kakao/alimtalk/kakaotalkIntrdView.do'/>";
|
||||
|
||||
}
|
||||
|
||||
@ -144,5 +144,5 @@ function cntntBtnInfo(stepInfo){
|
||||
<li id="tabAt" class="tab topTab"><button type="button" onclick="javascript:fnLinkPageTopTab('tabAlim');">알림톡</button></li>
|
||||
<li id="tabFt" class="tab topTab"><button type="button" onclick="javascript:fnLinkPageTopTab('tabFriend');">친구톡</button></li>
|
||||
<li id="tabConf" class="tab topTab"><button type="button" onclick="javascript:fnLinkPageTopTab('tabConf');">카카오톡 설정</button></li>
|
||||
<li id="tabIntro" class="tab topTab"><button type="button" onclick="javascript:fnLinkPageTopTab('tabAlimtalkIntrd');">알림톡 소개</button></li>
|
||||
<li id="tabIntro" class="tab topTab"><button type="button" onclick="javascript:fnLinkPageTopTab('tabKakaotalkIntrd');">카카오톡 소개</button></li>
|
||||
</ul>
|
||||
@ -17,281 +17,492 @@
|
||||
<%@include file="/WEB-INF/jsp/web/kakao/include/KaKaoAlimtalkTopMenuTap.jsp" %>
|
||||
<!--// tab button -->
|
||||
|
||||
<div class="top_content kakao_intro_cont current">
|
||||
|
||||
|
||||
<div class="top_content kakao_intro_cont pay_tab_wrap current">
|
||||
<div class="heading">
|
||||
<h2>알림톡 소개</h2>
|
||||
<h2>카카오톡 소개</h2>
|
||||
</div>
|
||||
|
||||
<div class="kakao_intro">
|
||||
<div class="title">
|
||||
<h3>알림톡이란?</h3>
|
||||
</div>
|
||||
|
||||
<div class="title-line">
|
||||
<div class="left-line"></div>
|
||||
<div class="right-line"></div>
|
||||
</div>
|
||||
|
||||
<div class="con">
|
||||
<!--설명-->
|
||||
<div class="intro">
|
||||
<img class="phone" src="/publish/images/kakao_intro_cont/phone.png" alt="핸드폰">
|
||||
<ul class="list">
|
||||
<li>
|
||||
<img src="/publish/images/kakao_intro_cont/text.png" alt="카카오톡 전용 기업 메시지 서비스 “알림톡”">
|
||||
</li>
|
||||
<li>
|
||||
<p>1</p>
|
||||
<p>1,000자 이내 <span>텍스트 및 이미지 전송 가능</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p>2</p>
|
||||
<p><span>문자 메시지 대비</span> 65% 이상 저렴</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>3</p>
|
||||
<p>
|
||||
<span>카톡 채널아이디를 추가하지 않은 이용자에게도</span>
|
||||
<br>전화번호만 있으면 메시지 전송 가능
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>4</p>
|
||||
<p><span>발송실패 시</span> 자동으로 문자 대체 발송</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>5</p>
|
||||
<p><span>카카오 인증마크를 통해</span> 신뢰도 높은 메시지 발송</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>6</p>
|
||||
<p><span>발신자 브랜드의 이미지 및 </span>신뢰도 상승 효과 달성</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!--문자vs알림톡-->
|
||||
<div class="fight">
|
||||
<div class="line"></div>
|
||||
<div class="fight-title">
|
||||
<h4>문자 <span>VS</span> 알림톡</h4>
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
<div class="wrap">
|
||||
<div class="box box-01">
|
||||
<div class="fight-img">
|
||||
<p class="name">문자</p>
|
||||
<div class="icon">
|
||||
<img src="/publish/images/kakao_intro_cont/message.jpg.jpg" alt="문자">
|
||||
<p class="price">18원</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="vs">VS</p>
|
||||
<div class="fight-img kakao">
|
||||
<p class="name">알림톡</p>
|
||||
<div class="icon">
|
||||
<img src="/publish/images/kakao_intro_cont/kakao.jpg.jpg" alt="카카오">
|
||||
<p class="price">6.9원</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text">
|
||||
<p>문자 대비 <span>65% 저렴</span></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fight-line"></div>
|
||||
<div class="box box-02">
|
||||
<div class="fight-img">
|
||||
<p class="name">문자</p>
|
||||
<div class="icon">
|
||||
<img src="/publish/images/kakao_intro_cont/message.jpg.jpg" alt="문자">
|
||||
<p class="price">90Byte</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="vs">VS</p>
|
||||
<div class="fight-img kakao">
|
||||
<p class="name">알림톡</p>
|
||||
<div class="icon">
|
||||
<img src="/publish/images/kakao_intro_cont/kakao.jpg.jpg" alt="카카오">
|
||||
<p class="price">1,000글자</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text">
|
||||
<p>바이트(byte)에 관계없이 <span>무조건 1,000자(한/영) 발송</span></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--알림톡 활용 방법-->
|
||||
<div class="use">
|
||||
<div class="title">
|
||||
<h3>알림톡 활용 방법</h3>
|
||||
</div>
|
||||
<div class="title-line">
|
||||
<div class="left-line"></div>
|
||||
<div class="right-line"></div>
|
||||
</div>
|
||||
<div class="tab-wrap">
|
||||
<ul class="tabs">
|
||||
<li class="tab-link current" data-tab="tab-1">금융/보험</li>
|
||||
<li class="tab-link" data-tab="tab-2">기관/단체</li>
|
||||
<li class="tab-link" data-tab="tab-3">여행</li>
|
||||
<li class="tab-link" data-tab="tab-4">예약/예매</li>
|
||||
<li class="tab-link" data-tab="tab-5">배송/배달</li>
|
||||
<li class="tab-link" data-tab="tab-6">안내/이벤트</li>
|
||||
</ul>
|
||||
<div id="tab-1" class="tab-content current">
|
||||
<img src="/publish/images/kakao_intro_cont/bank.png" alt="금융,보험">
|
||||
</div>
|
||||
<div id="tab-2" class="tab-content">
|
||||
<img src="/publish/images/kakao_intro_cont/organization.png" alt="기관,단체">
|
||||
</div>
|
||||
<div id="tab-3" class="tab-content">
|
||||
<img src="/publish/images/kakao_intro_cont/travel.png" alt="여행">
|
||||
</div>
|
||||
<div id="tab-4" class="tab-content">
|
||||
<img src="/publish/images/kakao_intro_cont/reservation.png" alt="예약,예약">
|
||||
</div>
|
||||
<div id="tab-5" class="tab-content">
|
||||
<img src="/publish/images/kakao_intro_cont/delivery.png" alt="배송,배달">
|
||||
</div>
|
||||
<div id="tab-6" class="tab-content">
|
||||
<img src="/publish/images/kakao_intro_cont/event.png" alt="안내,이벤트">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="tabType1">
|
||||
<li class="tab active"><button type="button" onclick="contentTab(this,'1');">알림톡</button></li>
|
||||
<li class="tab"><button type="button" onclick="contentTab(this,'2');">친구톡</button></li>
|
||||
</ul>
|
||||
|
||||
<!--서비스이용방법-->
|
||||
<div class="service">
|
||||
<div class="title">
|
||||
<h3>서비스 이용 방법</h3>
|
||||
</div>
|
||||
<div class="title-line">
|
||||
<div class="left-line"></div>
|
||||
<div class="right-line"></div>
|
||||
</div>
|
||||
<div class="con first-line">
|
||||
<div class="service-01 common">
|
||||
<div class="step">
|
||||
<p>STEP <span>01</span></p>
|
||||
</div>
|
||||
<div class="text">
|
||||
<div class="btn">
|
||||
<a href="https://center-pf.kakao.com/" target="_blank">카카오톡 채널 가입하러 가기<img src="/publish/images/kakao_intro_cont/arrow.jpg" alt="화살표"></a>
|
||||
</div>
|
||||
<div class="text-line"></div>
|
||||
<div class="type">
|
||||
<p>
|
||||
카카오톡 채널을 먼저 가입해주신 다음 <br>
|
||||
비즈니스 채널 전환 신청을 해주세요.
|
||||
</p>
|
||||
<p>
|
||||
※ 가입 후 카카오톡 채널 설정에서 <br>
|
||||
공개, 검색허용 설정을 하셔야 합니다.
|
||||
</p>
|
||||
</div>
|
||||
<div class="icon">
|
||||
<img src="/publish/images/kakao_intro_cont/service_01.jpg" alt="카카오톡 채널 가입하러 가기 아이콘">
|
||||
</div>
|
||||
</div>
|
||||
<!-- 알림톡 소개 -->
|
||||
<div class="tab_content current" id="tab_content_1">
|
||||
<div class="kakao_intro">
|
||||
<div class="title">
|
||||
<h3>알림톡이란?</h3>
|
||||
</div>
|
||||
<div class="service-02 common">
|
||||
<div class="step">
|
||||
<p>STEP <span>02</span></p>
|
||||
|
||||
<div class="title-line">
|
||||
<div class="left-line"></div>
|
||||
<div class="right-line"></div>
|
||||
</div>
|
||||
|
||||
<div class="con">
|
||||
<!--설명-->
|
||||
<div class="intro">
|
||||
<img class="phone" src="/publish/images/kakao_intro_cont/phone.png" alt="핸드폰">
|
||||
<ul class="list">
|
||||
<li>
|
||||
<img src="/publish/images/kakao_intro_cont/text.png" alt="카카오톡 전용 기업 메시지 서비스 “알림톡”">
|
||||
</li>
|
||||
<li>
|
||||
<p>1</p>
|
||||
<p>1,000자 이내 <span>텍스트 및 이미지 전송 가능</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p>2</p>
|
||||
<p><span>문자 메시지 대비</span> 65% 이상 저렴</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>3</p>
|
||||
<p>
|
||||
<span>카톡 채널아이디를 추가하지 않은 이용자에게도</span>
|
||||
<br>전화번호만 있으면 메시지 전송 가능
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>4</p>
|
||||
<p><span>발송실패 시</span> 자동으로 문자 대체 발송</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>5</p>
|
||||
<p><span>카카오 인증마크를 통해</span> 신뢰도 높은 메시지 발송</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>6</p>
|
||||
<p><span>발신자 브랜드의 이미지 및 </span>신뢰도 상승 효과 달성</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="text">
|
||||
<div class="btn">
|
||||
<%-- <a href="<c:url value='/web/mjon/kakao/profile/selectKaKaoProfileList.do'/>">채널 ID 등록하러 가기<img src="/publish/images/kakao_intro_cont/arrow.jpg" alt="화살표"></a> --%>
|
||||
<a href="javascript:cntntBtnInfo('step02');">채널 ID 등록하러 가기<img src="/publish/images/kakao_intro_cont/arrow.jpg" alt="화살표"></a>
|
||||
|
||||
<!--문자vs알림톡-->
|
||||
<div class="fight">
|
||||
<div class="line"></div>
|
||||
<div class="fight-title">
|
||||
<h4>문자 <span>VS</span> 알림톡</h4>
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
<div class="text-line"></div>
|
||||
<div class="type">
|
||||
<p>
|
||||
가입하신 카카오톡 채널의 채널ID(채널이름)를 <br>
|
||||
채널ID 등록 메뉴에 등록해주세요.
|
||||
</p>
|
||||
</div>
|
||||
<div class="icon">
|
||||
<img src="/publish/images/kakao_intro_cont/service_02.jpg" alt="채널 ID 등록하러 가기 아이콘">
|
||||
<div class="wrap">
|
||||
<div class="box box-01">
|
||||
<div class="fight-img">
|
||||
<p class="name">문자</p>
|
||||
<div class="icon">
|
||||
<img src="/publish/images/kakao_intro_cont/message.jpg.jpg" alt="문자">
|
||||
<p class="price">18원</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="vs">VS</p>
|
||||
<div class="fight-img kakao">
|
||||
<p class="name">알림톡</p>
|
||||
<div class="icon">
|
||||
<img src="/publish/images/kakao_intro_cont/kakao.jpg.jpg" alt="카카오">
|
||||
<p class="price">6.9원</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text">
|
||||
<p>문자 대비 <span>65% 저렴</span></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fight-line"></div>
|
||||
<div class="box box-02">
|
||||
<div class="fight-img">
|
||||
<p class="name">문자</p>
|
||||
<div class="icon">
|
||||
<img src="/publish/images/kakao_intro_cont/message.jpg.jpg" alt="문자">
|
||||
<p class="price">90Byte</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="vs">VS</p>
|
||||
<div class="fight-img kakao">
|
||||
<p class="name">알림톡</p>
|
||||
<div class="icon">
|
||||
<img src="/publish/images/kakao_intro_cont/kakao.jpg.jpg" alt="카카오">
|
||||
<p class="price">1,000글자</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text">
|
||||
<p>바이트(byte)에 관계없이 <span>무조건 1,000자(한/영) 발송</span></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="con second-line">
|
||||
<div class="service-03 common">
|
||||
<div class="step">
|
||||
<p>STEP <span>03</span></p>
|
||||
</div>
|
||||
<div class="text">
|
||||
<div class="btn">
|
||||
<%-- <a href="<c:url value='/web/mjon/kakao/template/selectKaKaoTemplateList.do'/>">알림톡 템플릿 등록하러 가기<img src="/publish/images/kakao_intro_cont/arrow.jpg" alt="화살표"></a> --%>
|
||||
<a href="javascript:cntntBtnInfo('step03');">알림톡 템플릿 등록하러 가기<img src="/publish/images/kakao_intro_cont/arrow.jpg" alt="화살표"></a>
|
||||
</div>
|
||||
<div class="text-line"></div>
|
||||
<div class="type">
|
||||
<p>
|
||||
알림톡 발송을 위해서는 사용하실 템플릿(메시지 내용)에
|
||||
대한 카카오의 승인이 반드시 필요합니다.
|
||||
템플릿을 작성하신 후 심사요청을 진행해주세요.
|
||||
</p>
|
||||
<p>
|
||||
※ 템플릿 승인까지 최대 3일 소요
|
||||
</p>
|
||||
</div>
|
||||
<div class="icon">
|
||||
<img src="/publish/images/kakao_intro_cont/service_03.jpg" alt="알림톡 템플릿 등록하러 가기 아이콘">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--알림톡 활용 방법-->
|
||||
<div class="use">
|
||||
<div class="title">
|
||||
<h3>알림톡 활용 방법</h3>
|
||||
</div>
|
||||
<div class="service-04 common">
|
||||
<div class="step">
|
||||
<p>STEP <span>04</span></p>
|
||||
<div class="title-line">
|
||||
<div class="left-line"></div>
|
||||
<div class="right-line"></div>
|
||||
</div>
|
||||
<div class="tab-wrap">
|
||||
<ul class="tabs">
|
||||
<li class="tab-link current" data-tab="tab-1">금융/보험</li>
|
||||
<li class="tab-link" data-tab="tab-2">기관/단체</li>
|
||||
<li class="tab-link" data-tab="tab-3">여행</li>
|
||||
<li class="tab-link" data-tab="tab-4">예약/예매</li>
|
||||
<li class="tab-link" data-tab="tab-5">배송/배달</li>
|
||||
<li class="tab-link" data-tab="tab-6">안내/이벤트</li>
|
||||
</ul>
|
||||
<div id="tab-1" class="tab-content current">
|
||||
<img src="/publish/images/kakao_intro_cont/bank.png" alt="금융,보험">
|
||||
</div>
|
||||
<div class="text">
|
||||
<div class="btn">
|
||||
<a href="<c:url value='/web/mjon/alimtalk/kakaoAlimtalkMsgDataView.do'/>">알림톡 전송하기<img src="/publish/images/kakao_intro_cont/arrow.jpg" alt="화살표"></a>
|
||||
</div>
|
||||
<div class="text-line"></div>
|
||||
<div class="type">
|
||||
<p>
|
||||
템플릿이 승인되셨다면 문자온 알림톡을 <br>
|
||||
통해 메시지를 발송하실 수 있습니다.
|
||||
</p>
|
||||
</div>
|
||||
<div class="icon">
|
||||
<img src="/publish/images/kakao_intro_cont/service_04.jpg" alt="알림톡 전송하기 아이콘">
|
||||
</div>
|
||||
<div id="tab-2" class="tab-content">
|
||||
<img src="/publish/images/kakao_intro_cont/organization.png" alt="기관,단체">
|
||||
</div>
|
||||
<div id="tab-3" class="tab-content">
|
||||
<img src="/publish/images/kakao_intro_cont/travel.png" alt="여행">
|
||||
</div>
|
||||
<div id="tab-4" class="tab-content">
|
||||
<img src="/publish/images/kakao_intro_cont/reservation.png" alt="예약,예약">
|
||||
</div>
|
||||
<div id="tab-5" class="tab-content">
|
||||
<img src="/publish/images/kakao_intro_cont/delivery.png" alt="배송,배달">
|
||||
</div>
|
||||
<div id="tab-6" class="tab-content">
|
||||
<img src="/publish/images/kakao_intro_cont/event.png" alt="안내,이벤트">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--이용가이드 버튼-->
|
||||
<div class="guide">
|
||||
<a href="https://kakaobusiness.gitbook.io/main/ad/bizmessage/notice-friend" target="_blank">알림톡 이용가이드 보기 <img src="/publish/images/kakao_intro_cont/guide_arrow.png" alt="알림톡 이용가이드 화살표"></a>
|
||||
|
||||
<!--서비스이용방법-->
|
||||
<div class="service">
|
||||
<div class="title">
|
||||
<h3>서비스 이용 방법</h3>
|
||||
</div>
|
||||
<div class="title-line">
|
||||
<div class="left-line"></div>
|
||||
<div class="right-line"></div>
|
||||
</div>
|
||||
<div class="con first-line">
|
||||
<div class="service-01 common">
|
||||
<div class="step">
|
||||
<p>STEP <span>01</span></p>
|
||||
</div>
|
||||
<div class="text">
|
||||
<div class="btn">
|
||||
<a href="https://center-pf.kakao.com/" target="_blank">카카오톡 채널 가입하러 가기<img src="/publish/images/kakao_intro_cont/arrow.jpg" alt="화살표"></a>
|
||||
</div>
|
||||
<div class="text-line"></div>
|
||||
<div class="type">
|
||||
<p>
|
||||
카카오톡 채널을 먼저 가입해주신 다음 <br>
|
||||
비즈니스 채널 전환 신청을 해주세요.
|
||||
</p>
|
||||
<p>
|
||||
※ 가입 후 카카오톡 채널 설정에서 <br>
|
||||
공개, 검색허용 설정을 하셔야 합니다.
|
||||
</p>
|
||||
</div>
|
||||
<div class="icon">
|
||||
<img src="/publish/images/kakao_intro_cont/service_01.jpg" alt="카카오톡 채널 가입하러 가기 아이콘">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="service-02 common">
|
||||
<div class="step">
|
||||
<p>STEP <span>02</span></p>
|
||||
</div>
|
||||
<div class="text">
|
||||
<div class="btn">
|
||||
<%-- <a href="<c:url value='/web/mjon/kakao/profile/selectKaKaoProfileList.do'/>">채널 ID 등록하러 가기<img src="/publish/images/kakao_intro_cont/arrow.jpg" alt="화살표"></a> --%>
|
||||
<a href="javascript:cntntBtnInfo('step02');">채널 ID 등록하러 가기<img src="/publish/images/kakao_intro_cont/arrow.jpg" alt="화살표"></a>
|
||||
</div>
|
||||
<div class="text-line"></div>
|
||||
<div class="type">
|
||||
<p>
|
||||
가입하신 카카오톡 채널의 채널ID(채널이름)를 <br>
|
||||
채널ID 등록 메뉴에 등록해주세요.
|
||||
</p>
|
||||
</div>
|
||||
<div class="icon">
|
||||
<img src="/publish/images/kakao_intro_cont/service_02.jpg" alt="채널 ID 등록하러 가기 아이콘">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="con second-line">
|
||||
<div class="service-03 common">
|
||||
<div class="step">
|
||||
<p>STEP <span>03</span></p>
|
||||
</div>
|
||||
<div class="text">
|
||||
<div class="btn">
|
||||
<%-- <a href="<c:url value='/web/mjon/kakao/template/selectKaKaoTemplateList.do'/>">알림톡 템플릿 등록하러 가기<img src="/publish/images/kakao_intro_cont/arrow.jpg" alt="화살표"></a> --%>
|
||||
<a href="javascript:cntntBtnInfo('step03');">알림톡 템플릿 등록하러 가기<img src="/publish/images/kakao_intro_cont/arrow.jpg" alt="화살표"></a>
|
||||
</div>
|
||||
<div class="text-line"></div>
|
||||
<div class="type">
|
||||
<p>
|
||||
알림톡 발송을 위해서는 사용하실 템플릿(메시지 내용)에
|
||||
대한 카카오의 승인이 반드시 필요합니다.
|
||||
템플릿을 작성하신 후 심사요청을 진행해주세요.
|
||||
</p>
|
||||
<p>
|
||||
※ 템플릿 승인까지 최대 3일 소요
|
||||
</p>
|
||||
</div>
|
||||
<div class="icon">
|
||||
<img src="/publish/images/kakao_intro_cont/service_03.jpg" alt="알림톡 템플릿 등록하러 가기 아이콘">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="service-04 common">
|
||||
<div class="step">
|
||||
<p>STEP <span>04</span></p>
|
||||
</div>
|
||||
<div class="text">
|
||||
<div class="btn">
|
||||
<a href="<c:url value='/web/mjon/alimtalk/kakaoAlimtalkMsgDataView.do'/>">알림톡 전송하기<img src="/publish/images/kakao_intro_cont/arrow.jpg" alt="화살표"></a>
|
||||
</div>
|
||||
<div class="text-line"></div>
|
||||
<div class="type">
|
||||
<p>
|
||||
템플릿이 승인되셨다면 문자온 알림톡을 <br>
|
||||
통해 메시지를 발송하실 수 있습니다.
|
||||
</p>
|
||||
</div>
|
||||
<div class="icon">
|
||||
<img src="/publish/images/kakao_intro_cont/service_04.jpg" alt="알림톡 전송하기 아이콘">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--이용가이드 버튼-->
|
||||
<div class="guide">
|
||||
<a href="https://kakaobusiness.gitbook.io/main/ad/bizmessage/notice-friend" target="_blank">알림톡 이용가이드 보기 <img src="/publish/images/kakao_intro_cont/guide_arrow.png" alt="알림톡 이용가이드 화살표"></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--유의사항-->
|
||||
<div class="note">
|
||||
<div class="note-title">
|
||||
<p>
|
||||
<span>
|
||||
<img src="/publish/images/kakao_intro_cont/note_icon.png" alt="유의사항 아이콘">
|
||||
</span>유의사항
|
||||
</p>
|
||||
</div>
|
||||
<ul>
|
||||
<li>- 한글, 영문 구분 없이 최대 1,000자까지 전송 가능합니다.</li>
|
||||
<li>- 알림톡 발송 실패에 따른 대체문자 발송 시 문자요금(단문, 장문, 그림)이 보유 캐시에서 차감됩니다.</li>
|
||||
<li>- 알림톡에서 허용하는 영리목적이 없는 정보성 메시지에 해당하는지 여부는 스팸 관련 정보통신망법 안내서를 꼭 참고하시길 바랍니다.</li>
|
||||
<li>(주문/예약 확인, 결제 내역, 배송 현황 메시지 등이 이에 해당하며 구독자 대상의 뉴스레터나 일반적인 공지문은 포함되지 않습니다.)</li>
|
||||
<li>
|
||||
<a href="/download/msg/K003_불법스팸_방지_안내서_제6차_개정판(수정_2024년).pdf" target="_blank">스팸 관련 정보통신망법 안내서 바로가기</a>
|
||||
</li>
|
||||
<li>- 부고, 답례, 초대장 등은 정보성 메시지가 아니므로 알림톡으로 보내실 수 없습니다. </li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--유의사항-->
|
||||
<div class="note">
|
||||
<div class="note-title">
|
||||
<p>
|
||||
<span>
|
||||
<img src="/publish/images/kakao_intro_cont/note_icon.png" alt="유의사항 아이콘">
|
||||
</span>유의사항
|
||||
</p>
|
||||
<!-- // 알림톡 소개 -->
|
||||
|
||||
<!-- 친구톡 소개 -->
|
||||
<div class="tab_content friendtalk" id="tab_content_2">
|
||||
<div class="kakao_intro">
|
||||
<div class="title">
|
||||
<h3>친구톡이란?</h3>
|
||||
</div>
|
||||
|
||||
<div class="title-line">
|
||||
<div class="left-line"></div>
|
||||
<div class="right-line"></div>
|
||||
</div>
|
||||
|
||||
<div class="con">
|
||||
<!--설명-->
|
||||
<div class="intro">
|
||||
<img class="phone" src="/publish/images/kakao_intro_cont/phone_friendtalk.png" alt="핸드폰">
|
||||
|
||||
<ul class="list">
|
||||
<li>
|
||||
<img src="/publish/images/kakao_intro_cont/text_friendtalk.png" alt="카카오톡 전용 기업 메시지 서비스 “알림톡”">
|
||||
</li>
|
||||
<li>
|
||||
<p>1</p>
|
||||
<p><span>광고성 메시지</span> 발송 가능(광고 표기 및 수신거부 안내 포함)</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>2</p>
|
||||
<p>채널 친구 추가된 사용자라면 <span>누구에게나</span> 발송 가능</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>3</p>
|
||||
<p><span>1,000자 이내</span> 텍스트 및 <span>이미지</span> 전송 가능</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>4</p>
|
||||
<p><span>맞춤형 메시지 및 쿠폰, 링크</span> 버튼 제공 가능</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>5</p>
|
||||
<p>문자 메시지 대비 <span>O % 이상</span> 저렴</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>6</p>
|
||||
<p>발송실패 시 <span>대체문자 발송</span> 기능 지원</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>7</p>
|
||||
<p>클릭률/도달률 분석을 통한 <span>마케팅 효율 강화</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p>8</p>
|
||||
<p>브랜드 친화적인 <span>이미지 커스터마이징</span> 가능</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!--문자vs알림톡-->
|
||||
<div class="fight">
|
||||
<div class="line"></div>
|
||||
<div class="fight-title">
|
||||
<h4>알림톡 <span>VS</span> 친구톡</h4>
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
|
||||
<div class="wrap">
|
||||
<div class="vs allimtalk_vs">
|
||||
<div class="title">알림톡</div>
|
||||
<div class="box">
|
||||
<ul>
|
||||
<li>전화번호 보유자</li>
|
||||
<li>정보성 <span>(예 : 주문, 예약, 안내 등)</span></li>
|
||||
<li>텍스트, 이미지 등</li>
|
||||
<li>최대 5개</li>
|
||||
<li>사전 승인 필요</li>
|
||||
<li>6.9원</li>
|
||||
<li>1,000자</li>
|
||||
<li>로고, 아이콘 형식만 가능</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vs vs_title">
|
||||
<div class="title">VS</div>
|
||||
<ul>
|
||||
<li>전송대상</li>
|
||||
<li>발송목적</li>
|
||||
<li>메세지 형태</li>
|
||||
<li>버튼 사용</li>
|
||||
<li>템플릿 승인</li>
|
||||
<li>비용</li>
|
||||
<li>길이제한</li>
|
||||
<li>이미지</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="vs friendtalk_vs">
|
||||
<div class="title">친구톡</div>
|
||||
<div class="box">
|
||||
<ul>
|
||||
<li>채널 친구</li>
|
||||
<li>광고 및 마케팅성<span>(예 : 이벤트, 쿠폰 등)</span></li>
|
||||
<li>텍스트, 기본이미지, 와이드 이미지형 등</li>
|
||||
<li>최대 5개</li>
|
||||
<li>별도 승인 없음 <span>야간 발송 제한(20:50 ~ 익일 08:00)</span></li>
|
||||
<li>0.0원 ~ 0.0원</li>
|
||||
<li>1,000자</li>
|
||||
<li>가능</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 친구톡 유형 -->
|
||||
<div class="use">
|
||||
<div class="title">
|
||||
<h3>친구톡 유형</h3>
|
||||
</div>
|
||||
|
||||
<div class="title-line">
|
||||
<div class="left-line"></div>
|
||||
<div class="right-line"></div>
|
||||
</div>
|
||||
|
||||
<ul class="friendtalk_use">
|
||||
<li>
|
||||
<div class="title">텍스트형</div>
|
||||
<img src="/publish/images/kakao_intro_cont/friendtalk_use1.png" alt="">
|
||||
<p class="explan_text">한/영 구분없이 <span>1,000자</span> + 버튼 <span>최대 5개</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<div class="title">기본 이미지형</div>
|
||||
<img src="/publish/images/kakao_intro_cont/friendtalk_use2.png" alt="">
|
||||
<p class="explan_text">한/영 구분없이 <span>400자</span> + 이미지 <span>1</span>장 + 버튼 <span>최대 5개</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<div class="title">와이드 이미지형</div>
|
||||
<img src="/publish/images/kakao_intro_cont/friendtalk_use3.png" alt="">
|
||||
<p class="explan_text">한/영 구분없이 <span>76자</span> + 이미지 <span>1</span>장 + 버튼 <span>최대 1개</span></p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!--서비스이용방법-->
|
||||
<div class="service">
|
||||
<div class="title">
|
||||
<h3>서비스 이용 방법</h3>
|
||||
</div>
|
||||
|
||||
<div class="title-line">
|
||||
<div class="left-line"></div>
|
||||
<div class="right-line"></div>
|
||||
</div>
|
||||
|
||||
<ul class="kakao_use_guide">
|
||||
<li class="guide_01">
|
||||
<div class="title">STEP <span>01</span></div>
|
||||
<i></i>
|
||||
<p class="guide_title">카카오톡 채널 가입</p>
|
||||
<span class="guide_info">카카오톡 채널 생성을 위한 <br> 계정이 없으시다면, 카카오에서 <br> 카카오톡 비즈니스 회원가입을<br> 먼저 진행해주세요.</span>
|
||||
</li>
|
||||
<li class="guide_02">
|
||||
<div class="title">STEP <span>02</span></div>
|
||||
<i></i>
|
||||
<p class="guide_title">채널 ID 등록하러 가기</p>
|
||||
<span class="guide_info">가입하신 카카오톡 채널의 채널 ID(채널이름)를 채널 ID 등록 메뉴에 등록해주세요.</span>
|
||||
</li>
|
||||
<li class="guide_03">
|
||||
<div class="title">STEP <span>03</span></div>
|
||||
<i></i>
|
||||
<p class="guide_title">친구톡 전송</p>
|
||||
<span class="guide_info">친구톡은 별도의 템플릿 심사 절차 없이, 즉시 발송 가능합니다.</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!--이용가이드 버튼-->
|
||||
<div class="guide">
|
||||
<a href="https://kakaobusiness.gitbook.io/main/ad/brandmessage" target="_blank">친구톡 이용가이드 보기 <img src="/publish/images/kakao_intro_cont/guide_arrow.png" alt="알림톡 이용가이드 화살표"></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--유의사항-->
|
||||
<div class="note">
|
||||
<div class="note-title">
|
||||
<p><span><img src="/publish/images/kakao_intro_cont/note_icon.png" alt="유의사항 아이콘"></span>유의사항</p>
|
||||
</div>
|
||||
<ul>
|
||||
<li>- (광고) 표기 여부는 선택 가능하나 , (광고)표기 해제에 따른 법령상 의무사항을 미 준수시에는 메시지 발송이 중단될 수 있습니다.</li>
|
||||
<li>- 광고성 친구톡 메시지에는 “(광고) 표시 및 수신거부 방식”이 표시되며, 대체 문자의 경우에는 “(광고) 문구 및 080 무료수신거부 번호”가 자동으로 포함됩니다.</li>
|
||||
<li><b>- 광고성 메시지의 발송 가능 시간은 08:00 ~ 20:50(한국시간) 입니다.</b></li>
|
||||
<li>- 친구톡 발송 실패에 따른 대체문자 발송 시 문자요금(단문, 장문, 그림)이 보유 캐시에서 차감됩니다.</li>
|
||||
<li>- 카카오정책 및 심의기준을 반드시 준수하여야 합니다.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<ul>
|
||||
<li>- 한글, 영문 구분 없이 최대 1,000자까지 전송 가능합니다.</li>
|
||||
<li>- 알림톡 발송 실패에 따른 대체문자 발송 시 문자요금(단문, 장문, 그림)이 보유 캐시에서 차감됩니다.</li>
|
||||
<li>- 알림톡에서 허용하는 영리목적이 없는 정보성 메시지에 해당하는지 여부는 스팸 관련 정보통신망법 안내서를 꼭 참고하시길 바랍니다.</li>
|
||||
<li>(주문/예약 확인, 결제 내역, 배송 현황 메시지 등이 이에 해당하며 구독자 대상의 뉴스레터나 일반적인 공지문은 포함되지 않습니다.)</li>
|
||||
<li>
|
||||
<a href="/download/msg/K003_불법스팸_방지_안내서_제6차_개정판(수정_2024년).pdf" target="_blank">스팸 관련 정보통신망법 안내서 바로가기</a>
|
||||
</li>
|
||||
<li>- 부고, 답례, 초대장 등은 정보성 메시지가 아니므로 알림톡으로 보내실 수 없습니다. </li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- // 친구톡 소개 -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
509
src/main/webapp/WEB-INF/jsp/web/kakao/intrd/KakaotalkIntro.jsp
Normal file
509
src/main/webapp/WEB-INF/jsp/web/kakao/intrd/KakaotalkIntro.jsp
Normal file
@ -0,0 +1,509 @@
|
||||
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
|
||||
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
|
||||
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
|
||||
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
|
||||
<%@ taglib prefix="ec" uri="/WEB-INF/tld/ecnet_tld.tld"%>
|
||||
<%@ page import="itn.com.cmm.LoginVO" %>
|
||||
|
||||
|
||||
<form id="bizForm" name="bizForm" method="post">
|
||||
<input type="hidden" id="menuTopTab" name="menuTopTab" value="tabIntro">
|
||||
</form>
|
||||
|
||||
<div class="inner">
|
||||
<!-- send top -->
|
||||
<div class="send_top">
|
||||
<!-- tab button -->
|
||||
<%@include file="/WEB-INF/jsp/web/kakao/include/KaKaoAlimtalkTopMenuTap.jsp" %>
|
||||
<!--// tab button -->
|
||||
|
||||
|
||||
|
||||
<div class="top_content kakao_intro_cont pay_tab_wrap current">
|
||||
<div class="heading">
|
||||
<h2>카카오톡 소개</h2>
|
||||
</div>
|
||||
|
||||
<ul class="tabType1">
|
||||
<li class="tab active"><button type="button" onclick="contentTab(this,'1');">알림톡</button></li>
|
||||
<li class="tab"><button type="button" onclick="contentTab(this,'2');">친구톡</button></li>
|
||||
</ul>
|
||||
|
||||
<!-- 알림톡 소개 -->
|
||||
<div class="tab_content current" id="tab_content_1">
|
||||
<div class="kakao_intro">
|
||||
<div class="title">
|
||||
<h3>알림톡이란?</h3>
|
||||
</div>
|
||||
|
||||
<div class="title-line">
|
||||
<div class="left-line"></div>
|
||||
<div class="right-line"></div>
|
||||
</div>
|
||||
|
||||
<div class="con">
|
||||
<!--설명-->
|
||||
<div class="intro">
|
||||
<img class="phone" src="/publish/images/kakao_intro_cont/phone.png" alt="핸드폰">
|
||||
<ul class="list">
|
||||
<li>
|
||||
<img src="/publish/images/kakao_intro_cont/text.png" alt="카카오톡 전용 기업 메시지 서비스 “알림톡”">
|
||||
</li>
|
||||
<li>
|
||||
<p>1</p>
|
||||
<p>1,000자 이내 <span>텍스트 및 이미지 전송 가능</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p>2</p>
|
||||
<p><span>문자 메시지 대비</span> 65% 이상 저렴</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>3</p>
|
||||
<p>
|
||||
<span>카톡 채널아이디를 추가하지 않은 이용자에게도</span>
|
||||
<br>전화번호만 있으면 메시지 전송 가능
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>4</p>
|
||||
<p><span>발송실패 시</span> 자동으로 문자 대체 발송</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>5</p>
|
||||
<p><span>카카오 인증마크를 통해</span> 신뢰도 높은 메시지 발송</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>6</p>
|
||||
<p><span>발신자 브랜드의 이미지 및 </span>신뢰도 상승 효과 달성</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!--문자vs알림톡-->
|
||||
<div class="fight">
|
||||
<div class="line"></div>
|
||||
<div class="fight-title">
|
||||
<h4>문자 <span>VS</span> 알림톡</h4>
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
<div class="wrap">
|
||||
<div class="box box-01">
|
||||
<div class="fight-img">
|
||||
<p class="name">문자</p>
|
||||
<div class="icon">
|
||||
<img src="/publish/images/kakao_intro_cont/message.jpg.jpg" alt="문자">
|
||||
<p class="price">18원</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="vs">VS</p>
|
||||
<div class="fight-img kakao">
|
||||
<p class="name">알림톡</p>
|
||||
<div class="icon">
|
||||
<img src="/publish/images/kakao_intro_cont/kakao.jpg.jpg" alt="카카오">
|
||||
<p class="price">6.9원</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text">
|
||||
<p>문자 대비 <span>65% 저렴</span></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fight-line"></div>
|
||||
<div class="box box-02">
|
||||
<div class="fight-img">
|
||||
<p class="name">문자</p>
|
||||
<div class="icon">
|
||||
<img src="/publish/images/kakao_intro_cont/message.jpg.jpg" alt="문자">
|
||||
<p class="price">90Byte</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="vs">VS</p>
|
||||
<div class="fight-img kakao">
|
||||
<p class="name">알림톡</p>
|
||||
<div class="icon">
|
||||
<img src="/publish/images/kakao_intro_cont/kakao.jpg.jpg" alt="카카오">
|
||||
<p class="price">1,000글자</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text">
|
||||
<p>바이트(byte)에 관계없이 <span>무조건 1,000자(한/영) 발송</span></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--알림톡 활용 방법-->
|
||||
<div class="use">
|
||||
<div class="title">
|
||||
<h3>알림톡 활용 방법</h3>
|
||||
</div>
|
||||
<div class="title-line">
|
||||
<div class="left-line"></div>
|
||||
<div class="right-line"></div>
|
||||
</div>
|
||||
<div class="tab-wrap">
|
||||
<ul class="tabs">
|
||||
<li class="tab-link current" data-tab="tab-1">금융/보험</li>
|
||||
<li class="tab-link" data-tab="tab-2">기관/단체</li>
|
||||
<li class="tab-link" data-tab="tab-3">여행</li>
|
||||
<li class="tab-link" data-tab="tab-4">예약/예매</li>
|
||||
<li class="tab-link" data-tab="tab-5">배송/배달</li>
|
||||
<li class="tab-link" data-tab="tab-6">안내/이벤트</li>
|
||||
</ul>
|
||||
<div id="tab-1" class="tab-content current">
|
||||
<img src="/publish/images/kakao_intro_cont/bank.png" alt="금융,보험">
|
||||
</div>
|
||||
<div id="tab-2" class="tab-content">
|
||||
<img src="/publish/images/kakao_intro_cont/organization.png" alt="기관,단체">
|
||||
</div>
|
||||
<div id="tab-3" class="tab-content">
|
||||
<img src="/publish/images/kakao_intro_cont/travel.png" alt="여행">
|
||||
</div>
|
||||
<div id="tab-4" class="tab-content">
|
||||
<img src="/publish/images/kakao_intro_cont/reservation.png" alt="예약,예약">
|
||||
</div>
|
||||
<div id="tab-5" class="tab-content">
|
||||
<img src="/publish/images/kakao_intro_cont/delivery.png" alt="배송,배달">
|
||||
</div>
|
||||
<div id="tab-6" class="tab-content">
|
||||
<img src="/publish/images/kakao_intro_cont/event.png" alt="안내,이벤트">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--서비스이용방법-->
|
||||
<div class="service">
|
||||
<div class="title">
|
||||
<h3>서비스 이용 방법</h3>
|
||||
</div>
|
||||
<div class="title-line">
|
||||
<div class="left-line"></div>
|
||||
<div class="right-line"></div>
|
||||
</div>
|
||||
<div class="con first-line">
|
||||
<div class="service-01 common">
|
||||
<div class="step">
|
||||
<p>STEP <span>01</span></p>
|
||||
</div>
|
||||
<div class="text">
|
||||
<div class="btn">
|
||||
<a href="https://center-pf.kakao.com/" target="_blank">카카오톡 채널 가입하러 가기<img src="/publish/images/kakao_intro_cont/arrow.jpg" alt="화살표"></a>
|
||||
</div>
|
||||
<div class="text-line"></div>
|
||||
<div class="type">
|
||||
<p>
|
||||
카카오톡 채널을 먼저 가입해주신 다음 <br>
|
||||
비즈니스 채널 전환 신청을 해주세요.
|
||||
</p>
|
||||
<p>
|
||||
※ 가입 후 카카오톡 채널 설정에서 <br>
|
||||
공개, 검색허용 설정을 하셔야 합니다.
|
||||
</p>
|
||||
</div>
|
||||
<div class="icon">
|
||||
<img src="/publish/images/kakao_intro_cont/service_01.jpg" alt="카카오톡 채널 가입하러 가기 아이콘">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="service-02 common">
|
||||
<div class="step">
|
||||
<p>STEP <span>02</span></p>
|
||||
</div>
|
||||
<div class="text">
|
||||
<div class="btn">
|
||||
<%-- <a href="<c:url value='/web/mjon/kakao/profile/selectKaKaoProfileList.do'/>">채널 ID 등록하러 가기<img src="/publish/images/kakao_intro_cont/arrow.jpg" alt="화살표"></a> --%>
|
||||
<a href="javascript:cntntBtnInfo('step02');">채널 ID 등록하러 가기<img src="/publish/images/kakao_intro_cont/arrow.jpg" alt="화살표"></a>
|
||||
</div>
|
||||
<div class="text-line"></div>
|
||||
<div class="type">
|
||||
<p>
|
||||
가입하신 카카오톡 채널의 채널ID(채널이름)를 <br>
|
||||
채널ID 등록 메뉴에 등록해주세요.
|
||||
</p>
|
||||
</div>
|
||||
<div class="icon">
|
||||
<img src="/publish/images/kakao_intro_cont/service_02.jpg" alt="채널 ID 등록하러 가기 아이콘">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="con second-line">
|
||||
<div class="service-03 common">
|
||||
<div class="step">
|
||||
<p>STEP <span>03</span></p>
|
||||
</div>
|
||||
<div class="text">
|
||||
<div class="btn">
|
||||
<%-- <a href="<c:url value='/web/mjon/kakao/template/selectKaKaoTemplateList.do'/>">알림톡 템플릿 등록하러 가기<img src="/publish/images/kakao_intro_cont/arrow.jpg" alt="화살표"></a> --%>
|
||||
<a href="javascript:cntntBtnInfo('step03');">알림톡 템플릿 등록하러 가기<img src="/publish/images/kakao_intro_cont/arrow.jpg" alt="화살표"></a>
|
||||
</div>
|
||||
<div class="text-line"></div>
|
||||
<div class="type">
|
||||
<p>
|
||||
알림톡 발송을 위해서는 사용하실 템플릿(메시지 내용)에
|
||||
대한 카카오의 승인이 반드시 필요합니다.
|
||||
템플릿을 작성하신 후 심사요청을 진행해주세요.
|
||||
</p>
|
||||
<p>
|
||||
※ 템플릿 승인까지 최대 3일 소요
|
||||
</p>
|
||||
</div>
|
||||
<div class="icon">
|
||||
<img src="/publish/images/kakao_intro_cont/service_03.jpg" alt="알림톡 템플릿 등록하러 가기 아이콘">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="service-04 common">
|
||||
<div class="step">
|
||||
<p>STEP <span>04</span></p>
|
||||
</div>
|
||||
<div class="text">
|
||||
<div class="btn">
|
||||
<a href="<c:url value='/web/mjon/alimtalk/kakaoAlimtalkMsgDataView.do'/>">알림톡 전송하기<img src="/publish/images/kakao_intro_cont/arrow.jpg" alt="화살표"></a>
|
||||
</div>
|
||||
<div class="text-line"></div>
|
||||
<div class="type">
|
||||
<p>
|
||||
템플릿이 승인되셨다면 문자온 알림톡을 <br>
|
||||
통해 메시지를 발송하실 수 있습니다.
|
||||
</p>
|
||||
</div>
|
||||
<div class="icon">
|
||||
<img src="/publish/images/kakao_intro_cont/service_04.jpg" alt="알림톡 전송하기 아이콘">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--이용가이드 버튼-->
|
||||
<div class="guide">
|
||||
<a href="https://kakaobusiness.gitbook.io/main/ad/bizmessage/notice-friend" target="_blank">알림톡 이용가이드 보기 <img src="/publish/images/kakao_intro_cont/guide_arrow.png" alt="알림톡 이용가이드 화살표"></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--유의사항-->
|
||||
<div class="note">
|
||||
<div class="note-title">
|
||||
<p>
|
||||
<span>
|
||||
<img src="/publish/images/kakao_intro_cont/note_icon.png" alt="유의사항 아이콘">
|
||||
</span>유의사항
|
||||
</p>
|
||||
</div>
|
||||
<ul>
|
||||
<li>- 한글, 영문 구분 없이 최대 1,000자까지 전송 가능합니다.</li>
|
||||
<li>- 알림톡 발송 실패에 따른 대체문자 발송 시 문자요금(단문, 장문, 그림)이 보유 캐시에서 차감됩니다.</li>
|
||||
<li>- 알림톡에서 허용하는 영리목적이 없는 정보성 메시지에 해당하는지 여부는 스팸 관련 정보통신망법 안내서를 꼭 참고하시길 바랍니다.</li>
|
||||
<li>(주문/예약 확인, 결제 내역, 배송 현황 메시지 등이 이에 해당하며 구독자 대상의 뉴스레터나 일반적인 공지문은 포함되지 않습니다.)</li>
|
||||
<li>
|
||||
<a href="/download/msg/K003_불법스팸_방지_안내서_제6차_개정판(수정_2024년).pdf" target="_blank">스팸 관련 정보통신망법 안내서 바로가기</a>
|
||||
</li>
|
||||
<li>- 부고, 답례, 초대장 등은 정보성 메시지가 아니므로 알림톡으로 보내실 수 없습니다. </li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- // 알림톡 소개 -->
|
||||
|
||||
<!-- 친구톡 소개 -->
|
||||
<div class="tab_content friendtalk" id="tab_content_2">
|
||||
<div class="kakao_intro">
|
||||
<div class="title">
|
||||
<h3>친구톡이란?</h3>
|
||||
</div>
|
||||
|
||||
<div class="title-line">
|
||||
<div class="left-line"></div>
|
||||
<div class="right-line"></div>
|
||||
</div>
|
||||
|
||||
<div class="con">
|
||||
<!--설명-->
|
||||
<div class="intro">
|
||||
<img class="phone" src="/publish/images/kakao_intro_cont/phone_friendtalk.png" alt="핸드폰">
|
||||
|
||||
<ul class="list">
|
||||
<li>
|
||||
<img src="/publish/images/kakao_intro_cont/text_friendtalk.png" alt="카카오톡 전용 기업 메시지 서비스 “알림톡”">
|
||||
</li>
|
||||
<li>
|
||||
<p>1</p>
|
||||
<p><span>광고성 메시지</span> 발송 가능(광고 표기 및 수신거부 안내 포함)</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>2</p>
|
||||
<p>채널 친구 추가된 사용자라면 <span>누구에게나</span> 발송 가능</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>3</p>
|
||||
<p><span>1,000자 이내</span> 텍스트 및 <span>이미지</span> 전송 가능</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>4</p>
|
||||
<p><span>맞춤형 메시지 및 쿠폰, 링크</span> 버튼 제공 가능</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>5</p>
|
||||
<p>문자 메시지 대비 <span>저렴</span>한 단가</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>6</p>
|
||||
<p>발송실패 시 <span>대체문자 발송</span> 기능 지원</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>7</p>
|
||||
<p>클릭률/도달률 분석을 통한 <span>마케팅 효율 강화</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p>8</p>
|
||||
<p>브랜드 친화적인 <span>이미지 커스터마이징</span> 가능</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!--문자vs알림톡-->
|
||||
<div class="fight">
|
||||
<div class="line"></div>
|
||||
<div class="fight-title">
|
||||
<h4>알림톡 <span>VS</span> 친구톡</h4>
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
|
||||
<div class="wrap">
|
||||
<div class="vs allimtalk_vs">
|
||||
<div class="title">알림톡</div>
|
||||
<div class="box">
|
||||
<ul>
|
||||
<li>전화번호 보유자</li>
|
||||
<li>정보성 <span>(예 : 주문, 예약, 안내 등)</span></li>
|
||||
<li>텍스트, 이미지 등</li>
|
||||
<li>최대 5개</li>
|
||||
<li>사전 승인 필요</li>
|
||||
<li>6.9원</li>
|
||||
<li>1,000자</li>
|
||||
<li>로고, 아이콘 형식만 가능</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vs vs_title">
|
||||
<div class="title">VS</div>
|
||||
<ul>
|
||||
<li>전송대상</li>
|
||||
<li>발송목적</li>
|
||||
<li>메세지 형태</li>
|
||||
<li>버튼 사용</li>
|
||||
<li>템플릿 승인</li>
|
||||
<li>비용</li>
|
||||
<li>길이제한</li>
|
||||
<li>이미지</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="vs friendtalk_vs">
|
||||
<div class="title">친구톡</div>
|
||||
<div class="box">
|
||||
<ul>
|
||||
<li>채널 친구</li>
|
||||
<li>광고 및 마케팅성<span>(예 : 이벤트, 쿠폰 등)</span></li>
|
||||
<li>텍스트, 기본이미지, 와이드 이미지형 등</li>
|
||||
<li>최대 5개</li>
|
||||
<li>별도 승인 없음 <span>야간 발송 제한(20:50 ~ 익일 08:00)</span></li>
|
||||
<li>13.8원 ~ 22.9원</li>
|
||||
<li>1,000자</li>
|
||||
<li>가능</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 친구톡 유형 -->
|
||||
<div class="use">
|
||||
<div class="title">
|
||||
<h3>친구톡 유형</h3>
|
||||
</div>
|
||||
|
||||
<div class="title-line">
|
||||
<div class="left-line"></div>
|
||||
<div class="right-line"></div>
|
||||
</div>
|
||||
|
||||
<ul class="friendtalk_use">
|
||||
<li>
|
||||
<div class="title">텍스트형</div>
|
||||
<img src="/publish/images/kakao_intro_cont/friendtalk_use1.png" alt="">
|
||||
<p class="explan_text">한/영 구분없이 <span>1,000자</span> + 버튼 <span>최대 5개</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<div class="title">기본 이미지형</div>
|
||||
<img src="/publish/images/kakao_intro_cont/friendtalk_use2.png" alt="">
|
||||
<p class="explan_text">한/영 구분없이 <span>400자</span> + 이미지 <span>1</span>장 + 버튼 <span>최대 5개</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<div class="title">와이드 이미지형</div>
|
||||
<img src="/publish/images/kakao_intro_cont/friendtalk_use3.png" alt="">
|
||||
<p class="explan_text">한/영 구분없이 <span>76자</span> + 이미지 <span>1</span>장 + 버튼 <span>최대 1개</span></p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!--서비스이용방법-->
|
||||
<div class="service">
|
||||
<div class="title">
|
||||
<h3>서비스 이용 방법</h3>
|
||||
</div>
|
||||
|
||||
<div class="title-line">
|
||||
<div class="left-line"></div>
|
||||
<div class="right-line"></div>
|
||||
</div>
|
||||
|
||||
<ul class="kakao_use_guide">
|
||||
<li class="guide_01">
|
||||
<div class="title">STEP <span>01</span></div>
|
||||
<i></i>
|
||||
<p class="guide_title">카카오톡 채널 가입</p>
|
||||
<span class="guide_info">카카오톡 채널 생성을 위한 <br> 계정이 없으시다면, 카카오에서 <br> 카카오톡 비즈니스 회원가입을<br> 먼저 진행해주세요.</span>
|
||||
</li>
|
||||
<li class="guide_02">
|
||||
<div class="title">STEP <span>02</span></div>
|
||||
<i></i>
|
||||
<p class="guide_title">채널 ID 등록하러 가기</p>
|
||||
<span class="guide_info">가입하신 카카오톡 채널의 채널 ID(채널이름)를 채널 ID 등록 메뉴에 등록해주세요.</span>
|
||||
</li>
|
||||
<li class="guide_03">
|
||||
<div class="title">STEP <span>03</span></div>
|
||||
<i></i>
|
||||
<p class="guide_title">친구톡 전송</p>
|
||||
<span class="guide_info">친구톡은 별도의 템플릿 심사 절차 없이, 즉시 발송 가능합니다.</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!--이용가이드 버튼-->
|
||||
<div class="guide">
|
||||
<a href="https://kakaobusiness.gitbook.io/main/ad/brandmessage" target="_blank">친구톡 이용가이드 보기 <img src="/publish/images/kakao_intro_cont/guide_arrow.png" alt="알림톡 이용가이드 화살표"></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--유의사항-->
|
||||
<div class="note">
|
||||
<div class="note-title">
|
||||
<p><span><img src="/publish/images/kakao_intro_cont/note_icon.png" alt="유의사항 아이콘"></span>유의사항</p>
|
||||
</div>
|
||||
<ul>
|
||||
<li>- (광고) 표기 여부는 선택 가능하나 , (광고)표기 해제에 따른 법령상 의무사항을 미 준수시에는 메시지 발송이 중단될 수 있습니다.</li>
|
||||
<li>- 광고성 친구톡 메시지에는 “(광고) 표시 및 수신거부 방식”이 표시되며, 대체 문자의 경우에는 “(광고) 문구 및 080 무료수신거부 번호”가 자동으로 포함됩니다.</li>
|
||||
<li><b>- 광고성 메시지의 발송 가능 시간은 08:00 ~ 20:50(한국시간) 입니다.</b></li>
|
||||
<li>- 친구톡 발송 실패에 따른 대체문자 발송 시 문자요금(단문, 장문, 그림)이 보유 캐시에서 차감됩니다.</li>
|
||||
<li>- 카카오정책 및 심의기준을 반드시 준수하여야 합니다.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- // 친구톡 소개 -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--// send top -->
|
||||
Loading…
Reference in New Issue
Block a user