문의하기

무엇을 찾고 계신가요?

에 의해이완 막
2024년 4월 14일

Elfsight를 사용하여 WhatsApp 삽입

Elfsight를 사용하여 Webflow 사이트에 WhatsApp 채팅 위젯을 삽입하세요.

간단한 4단계로 Elfsight를 사용하여 Webflow 웹사이트에 WhatsApp 채팅 위젯을 삽입하는 프로세스를 알아보세요.

  1. Elfsight에서 위젯 생성
  2. 코드를 복제하세요
  3. Webflow에 코드 삽입
  4. 마무리 및 테스트

아직 설정하지 않은 경우 엘프사이트 아직 계정이 없다면 계정을 만들어 다양한 위젯을 살펴보세요. 특히 이 가이드에서는 다음이 필요합니다. WhatsApp 채팅 위젯.

Elfsight에 로그인하면 애플리케이션 페이지를 방문하여 WhatsApp을 검색하세요. 거기에서 WhatsApp 채팅 위젯을 생성하는 옵션입니다.

Elfsight에서 위젯 생성

WhatsApp 위젯을 획득한 후 템플릿을 선택하세요.

  1. 위젯 이름 지정(예: WhatsApp 포함)
  2. 위젯 레이아웃 템플릿 선택
  3. 수도꼭지 템플릿을 계속 사용하세요.

다음으로 사용자 정의를 진행합니다.

  1. 콘텐츠
  2. 설정
  3. 설계

아래에 WhatsApp 전화번호를 입력하여 시작하세요. 콘텐츠 섹션을 선택한 다음 Webflow 프로젝트에 맞게 위젯을 맞춤설정하세요.

콘텐츠

그만큼 콘텐츠 기능을 사용하면 다음을 수정할 수 있습니다. 

  • 채팅 버블
  • 채팅 헤더
  • 환영 메시지
  • 채팅 시작 버튼

채팅 풍선

탭핑 채팅 버블 옵션을 사용하면 채팅 풍선 아이콘을 선택하고 사용자 정의를 입력할 수 있습니다. 버블 텍스트 아이콘 옆에 표시합니다(텍스트가 추가되지 않으면 비어 있습니다).

채팅 헤더

선택 채팅 헤더 다음과 같은 헤더 사용자 정의를 탐색하는 옵션

  1. 채팅이 열릴 때 표시되는 프로필 사진
  2. 프로필 사진 옆에 있는 이름
  3. 이름 아래 캡션

환영 메시지

액세스 환영 메시지 채팅 시작 메시지를 입력하는 기능입니다.

채팅 시작 버튼

사용하여 채팅 시작 옵션을 사용하면 WhatsApp을 시작하는 텍스트를 정의할 수 있습니다. 버튼에서 WhatsApp 아이콘을 표시하거나 숨기도록 전환할 수도 있습니다.

설정

그만큼 설정 기능을 사용하면 다음을 수정할 수 있습니다.

  • 위치
  • 채팅 표시 설정
  • 오픈 채팅 트리거 
  • 알림

위치

다음을 클릭하세요. 위치 위젯의 위치를 다음과 같이 설정할 수 있는 사이드바에 액세스하는 옵션입니다.

  • 떠다니는 버블
  • 버블 삽입
  • 채팅 창 삽입

위젯을 중앙이나 왼쪽/오른쪽으로 정렬할 수도 있습니다.

채팅 표시 설정

채팅 표시 설정 특정 조건에 따라 위젯을 활성화하거나 비활성화합니다.

사용 가능한 조건은 다음과 같습니다.

  • 페이지(채팅 위젯을 표시할 위치)
  • 기기(모바일/데스크톱에 위젯 표시)
  • 방문자(모든 방문자, 신규 방문자 또는 재방문자를 위한 채팅 표시)
  • 날짜 및 시간(위젯을 표시할 시기)

채팅 트리거 열기

채팅 트리거 열기 다음에 따라 디스플레이 설정을 조정합니다.

  • 페이지에 머문 시간
  • 현장 체류 시간
  • 스크롤 위치
  • 종료 의도

설계

스타일 섹션에서는 프로젝트 디자인에 맞게 색상, 버튼 모양 및 CSS를 쉽게 사용자 정의할 수 있습니다.

수정이 완료되면 반드시 가게.

포함 스크립트 복제

가젯을 Webflow 계획에 통합하려면 Elfsight의 포함 스크립트가 필요합니다. 

이전 단계에서 조정 내용이 보존되면 포함 스크립트가 포함된 팝업 창이 나타납니다. 스크립트를 클릭하면 클립보드에 자동으로 복사됩니다.

Webflow에 스크립트 삽입

Webflow 프로젝트에 가젯을 포함하는 방법에는 프로젝트 전체, 모든 페이지 또는 개별 페이지의 두 가지 방법이 있습니다.

프로젝트 전체

모든 페이지에 가젯을 삽입하려면 다음 단계를 따르세요.

  1. 선택 사용자 정의 코드 프로젝트 설정 내의 탭
  2. 복사한 포함 스크립트를 헤드 코드 프로젝트의 섹션
  3. 조정 내용 저장
  4. 풀어 주다
  5. 선택한 도메인에 공개

주목: 사용자 정의 스크립트는 최종 사이트에서만 볼 수 있습니다.

게시 및 확인

이제 새 가젯을 게시하고 검증할 차례입니다.

  1. 누르다 풀어 주다
  2. 게시하려는 도메인을 선택하세요.
  3. 선택한 도메인으로 출시
Designer에서 계획 출시
프로젝트 설정에서 계획 게시

이완 막
Ewan Mak의 최신 게시물 (모두 보기)

관련 게시물

에 의해이완 막
업데이트 날짜