아임웹 플로팅 상담 버튼 만들기 | 카카오톡 상담·전화상담·맨위로 버튼 커스텀 코드

아임웹 플로팅 상담 버튼 만들기

홈페이지를 운영하다 보면 방문자가 문의를 하고 싶어도 상담 버튼을 찾지 못해 이탈하는 경우가 많습니다.

특히 병원, 법률사무소, 제조업, 교육기관처럼 문의 전환이 중요한 홈페이지라면 언제든 클릭할 수 있는 상담 버튼이 필요합니다.

이번에 소개하는 코드는 스크롤 시 우측 하단에 나타나는 플로팅 상담 버튼입니다.

카카오톡 상담, 전화 상담, 맨 위로 이동 버튼까지 함께 제공되어 실제 홈페이지 제작 시 활용도가 높은 커스텀 코드입니다.

---

이 코드로 구현되는 기능

✔    스크롤 시 우측 하단에 플로팅 버튼 등장

✔    카카오톡 상담 버튼

✔    전화 상담 버튼

✔    TOP 버튼

✔    부드러운 등장 애니메이션

✔    마우스 오버 시 텍스트 확장 효과

✔    모바일 반응형 지원

✔    아임웹 코드위젯에 바로 적용 가능

 

---

 

사용하면 좋은 상황

• 병원 홈페이지
• 진료예약 및 상담 문의 유도
• 법률사무소 홈페이지
• 전화상담 및 카카오톡 상담 연결
• 제조업 홈페이지
• 견적 문의 전환 강화
• 학원 홈페이지
• 상담 신청 유도
• 랜딩페이지
• 광고 유입 고객 문의 전환 극대화

홈페이지 제작 시 가장 많이 사용하는 전환 유도 요소 중 하나입니다.

---

 

적용 방법

1단계 : 아임웹 관리자 접속

2단계 : 디자인 모드 → 코드 위젯 추가

3단계 : 아래 전체 코드 붙여넣기

4단계 : 카카오톡 링크와 전화번호 수정

 

아래 부분만 변경하면 됩니다.

 

카카오링크

https://open.kakao.com/o/카카오링크

↓

https://open.kakao.com/o/실제카카오링크

 

전화번호 수정

tel:01012345678

↓

tel:실제전화번호

 

---

 

전체 코드

<div class="msoa-floating-wrap">

  <a href="https://open.kakao.com/o/카카오링크"
     target="_blank"
     class="msoa-float-item kakao">
    <span class="msoa-float-label">카카오톡 상담</span>
    <span class="msoa-float-icon">💬</span>
  </a>

  <a href="tel:01012345678"
     class="msoa-float-item call">
    <span class="msoa-float-label">전화 상담</span>
    <span class="msoa-float-icon">📞</span>
  </a>

  <button class="msoa-top-item" id="msoaTopBtn" type="button">
    <span class="msoa-top-icon">↑</span>
  </button>

</div>

<style>
.msoa-floating-wrap{
  position:fixed;
  right:28px;
  bottom:32px;
  z-index:99999;

  display:flex;
  flex-direction:column;
  align-items:flex-end;

  opacity:0;
  visibility:hidden;
  transform:translateY(24px);
  transition:all .35s ease;
}

.msoa-floating-wrap.show{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

.msoa-float-item,
.msoa-top-item{
  width:220px;
  height:54px;

  display:flex;
  align-items:center;
  justify-content:flex-end;

  padding:0;
  margin:0 0 12px 0;

  border:none;
  background:transparent;

  text-decoration:none;
  color:#111;
  font-family:Pretendard,sans-serif;

  cursor:pointer;
}

.msoa-top-item{
  margin-bottom:0;
}

.msoa-float-item{
  gap:10px;
}

.msoa-float-icon,
.msoa-top-icon{
  width:54px;
  height:54px;
  min-width:54px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;

  font-size:23px;
  line-height:1;

  box-shadow:0 8px 22px rgba(0,0,0,.12);
  transition:all .28s ease;
}

.msoa-float-label{
  width:0;
  height:48px;

  opacity:0;
  overflow:hidden;
  white-space:nowrap;

  padding:0;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:999px;
  background:#fff;

  font-size:15px;
  font-weight:700;
  letter-spacing:-0.03em;

  box-shadow:0 8px 22px rgba(0,0,0,.10);
  transition:all .28s ease;
}

.msoa-float-item:hover .msoa-float-label{
  width:142px;
  opacity:1;
  padding:0 18px;
}

.msoa-float-item.kakao .msoa-float-icon{
  background:#FEE500;
  color:#111;
}

.msoa-float-item.call .msoa-float-icon{
  background:#0057ff;
  color:#fff;
}

.msoa-top-icon{
  background:#111;
  color:#fff;
  font-size:20px;
}

.msoa-float-item:hover .msoa-float-icon,
.msoa-top-item:hover .msoa-top-icon{
  transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(0,0,0,.18);
}

@media(max-width:768px){

  .msoa-floating-wrap{
    right:16px;
    bottom:18px;
  }

  .msoa-float-item,
  .msoa-top-item{
    width:198px;
    height:50px;
    margin-bottom:10px;
  }

  .msoa-top-item{
    margin-bottom:0;
  }

  .msoa-float-icon,
  .msoa-top-icon{
    width:50px;
    height:50px;
    min-width:50px;
  }

  .msoa-float-label{
    height:44px;
    font-size:14px;
  }

  .msoa-float-item:hover .msoa-float-label{
    width:128px;
    padding:0 15px;
  }
}
</style>

<script>
(function(){

  const floatingWrap = document.querySelector(".msoa-floating-wrap");
  const topBtn = document.getElementById("msoaTopBtn");

  function toggleFloating(){
    if(window.scrollY > 120){
      floatingWrap.classlist.add("show");
    }else{
      floatingWrap.classlist.remove("show");
    }
  }

  window.addEventListener("scroll", toggleFloating);
  toggleFloating();

  topBtn.addEventListener("click", function(){
    window.scrollTo({
      top:0,
      behavior:"smooth"
    });
  });

})();
</script>

 

---

 

코드 수정 포인트

1. 카카오톡 버튼 색상 변경

background:#FEE500;

노란색 카카오 컬러입니다.

원하는 색상으로 변경 가능합니다.

 

2. 전화 버튼 색상 변경

background:#0057ff;

파란색으로 설정되어 있습니다.

브랜드 컬러에 맞게 변경 가능합니다.

 

3. 버튼 위치 변경

right:28px;
bottom:32px;

우측 하단에 배치됩니다.

right:50px;
bottom:50px;

예시 : 더 안쪽으로 이동됩니다.

 

4. 등장 시점 변경

if(window.scrollY > 120)

120px 이상 스크롤 시 버튼 등장

if(window.scrollY > 300)

예시: 300px 이후 등장

---

자주 발생하는 오류와 해결 방법

1. 버튼이 보이지 않아요

대부분 코드 위젯 위치 문제입니다.

HTML 모드로 삽입했는지 확인해 주세요.

 

2. 카카오톡이 연결되지 않아요

오픈채팅 링크 주소가 잘못 입력된 경우가 많습니다.

실제 링크를 다시 복사해서 입력해 주세요.

 

3. 전화 연결이 안돼요

전화번호 앞에 tel: 이 포함되어 있는지 확인합니다.

예시

tel:01012345678

 

 

4. 모바일에서 위치가 이상해요

반응형 CSS가 삭제되었는지 확인해 주세요.

아래 구문은 반드시 유지해야 합니다.

@media(max-width:768px)

---

 

왜 플로팅 상담 버튼이 중요할까?

방문자는 홈페이지에 들어온 후 평균 몇 초 안에 문의 여부를 결정합니다.

상담 버튼이 눈에 잘 띄지 않으면 이탈 가능성이 높아집니다.

플로팅 배너는 사용자가 어느 위치에 있든 문의 버튼을 볼 수 있기 때문에 상담 전환율을 높이는 데 효과적입니다.

특히 아임웹 홈페이지 제작 시 가장 먼저 적용하는 커스텀 코드 중 하나라고 볼 수 있습니다.

---

 

이번 코드는 아임웹 홈페이지 제작 시 활용도가 매우 높은 플로팅 상담 버튼입니다.

카카오톡 상담, 전화상담, 맨 위로 이동 기능을 하나로 구성할 수 있으며

HTML, CSS, JS만으로 구현되어 별도 플러그인 없이 적용 가능합니다.

홈페이지 제작이나 웹디자인 작업을 하시는 분이라면 하나쯤 보관해 두면 다양한 프로젝트에 활용할 수 있는 커스텀 코드입니다.

 

 

홈페이지 제작 상담 문의

믓아 스튜디오

 

JS 적용하는 방법 가이드

아임웹 JS 적용하는 방법, 초보자도 가능한 JavaScript 가이드

 

CSS 적용하는 방법 가이드

아임웹 CSS 적용하는 방법｜초보자도 가능한 디자인 수정 방법