개발자 소식으로 돌아가기

WhatsApp을 Shopify에 통합하기

2023년 3월 7일제작:Rashed Talukder
개발자 뉴스 구독하기

중간 규모 또는 대규모 비즈니스의 Shopify 개발자라면 고객과의 원활한 소통이 얼마나 중요한지 아실 것입니다. 이러한 목표를 달성하는 데 WhatsApp Business 플랫폼을 사용하면 수천 명의 고객에게 자동화된 메시지를 보내고 고객 기반이 성장하는 만큼 프로세스를 효율적으로 확장하는 데 도움을 얻을 수 있습니다.

이 튜토리얼에서는 WhatsApp을 Shopify에 연결하고 고객이 매장에서 트리거하는 이벤트(예: 제품을 장바구니에 추가하거나 주문 접수)에 따라 WhatsApp 알림 메시지를 고객에게 보내는 과정을 단계별로 설명합니다. 이를 위해 Meta가 호스팅하는 클라우드 API를 사용할 것입니다.

필수 조건

이 튜토리얼을 진행하려면 다음이 필요합니다.

마지막 단계를 완료하면 임시 액세스 토큰이 부여됩니다. 나머지 튜토리얼을 진행하는 동안 이 액세스 토큰이 필요하므로 잊지 말고 기억하세요.

이러한 요구 사항을 충족하면 나머지 튜토리얼을 진행할 수 있습니다.

WhatsApp에서 메시지 템플릿 만들기

WhatsApp 메시지 템플릿은 고객이 개발자의 앱에 메시지 전송 권한을 부여한 후에 고객에게 메시지를 보내는 데 두 번 이상 사용할 수 있는 여러 개의 메시지 형식을 만드는 데 도움이 됩니다.

다음 단계에 따라 주문 알림 메시지를 보내기 위한 템플릿을 만들어 보세요.

  • 비즈니스 관리자에 로그인하고 비즈니스 계정을 선택합니다.
  • 페이지 왼쪽 상단에 있는 선 3개 모양의 아이콘을 클릭하고 WhatsApp 관리자를 클릭합니다.
  • 측면 탐색 메뉴에서 계정 도구 아이콘에 마우스를 올리고 메시지 템플릿을 클릭합니다.
  • 페이지 오른쪽 상단에서 템플릿 만들기를 클릭합니다.
  • 다음 페이지에서 자신의 카테고리에 맞는 거래 옵션을 선택하고 템플릿에 이름(이 경우 'order_confirmation')을 지정한 다음, 언어를 선택합니다.
  • 계속을 클릭하여 템플릿 편집기로 이동합니다.

order_confirmation 템플릿이 설정되었으므로 윤곽을 정의할 차례입니다. 메시지가 고객에게 표시되는 방식은 다음과 같습니다.

  • 주문이 접수되었습니다!

  • [고객 이름]님, 안녕하세요.

  • 구매해 주셔서 감사합니다.

  • 고객님의 주문(23190)을 처리하고 있습니다. 고객님의 패키지는 영업일 기준 2~3일 이내로 배송될 예정입니다(공휴일 및 주말 제외).

  • 배송이 완료되면 다시 이메일로 알려드리겠습니다.

템플릿 편집기에서 헤더 섹션의 텍스트를 선택합니다. “…을 접수하였습니다.” 단락이 헤더가 되고 나머지 메시지는 본문 섹션에 복사됩니다.

이제 본문 텍스트 상자 아래의 변수 추가를 두 번 클릭하여 변수 두 개를 추가합니다. 고객 이름이 들어갈 자리에 첫 번째 변수({{1}})를 복사하여 붙여넣습니다. 다음으로 괄호 안의 주문 번호 자리에 두 번째 변수({{2}})를 복사하여 붙여넣습니다.

이 작업이 끝나면 메시지가 다음과 같은 형식이 됩니다. 동일한 페이지에서 미리 보기 영역을 확인할 수 있습니다.

제출을 클릭하여 메시지 템플릿을 저장합니다.

템플릿이 준비되었으므로 WhatsApp Business 플랫폼을 사용하여 Shopify 관리자에서 Webhooks를 만들고 고객이 주문을 접수하면 고객에게 자동으로 메시지를 보내는 앱을 매핑할 수 있습니다.

Webhooks를 사용하여 Express 서버로 알림 보내기

고객이 Shopify 매장에서 주문할 때마다 고객에게 자동화된 메시지를 보내려고 한다고 생각해 보세요. 약 5분 간격으로 매장에서 새로운 주문을 확인할 수 있습니다. 그러나 매장으로 계속 API 요청을 보내는 것은 비효율적이며, 특히 새로운 주문이 없을 경우에는 더욱 그렇습니다.

Webhooks가 매장에서 '주문 생성' 이벤트를 수신하고 고객이 주문할 때마다 알려주는 것이 훨씬 더 효율적입니다.

'주문 생성' Webhooks를 만들고 이를 Express 서버에 매핑하기 위한 기본적인 단계는 다음과 같습니다.

Node.js 프로젝트 설정

먼저 프로젝트에 'whatsapp-demo'라는 폴더를 만듭니다.

다음으로, 'whatsapp-demo'에서 명령 터미널 cd를 시작하고 다음 명령을 실행하여 Node.js 프로젝트를 초기화합니다.

npm init -y

다음 명령을 실행하여 Node.js에서 웹 서버를 만드는 데 사용하는 라이브러리인 express를 설치합니다. 

npm i express

개발 환경이 설정되었으므로 Express 서버를 만들 것입니다.

Express 서버 만들기

whatsapp-demo 폴더 내에 test.js라는 이름의 파일을 만듭니다. 원하는 소스 코드 편집기로 파일을 열고 다음 코드를 복사하여 붙여넣습니다.

const express = require('express')
const app = express()

app.post('/webhooks/orders/create', (req, res) => {
 console.log('Yes, We got an order!')
 res.sendStatus(200)
})

app.listen(3000, () => console.log('Now running on port 3000!'))

위의 코드를 사용하여 Webhooks가 '주문 생성' 알림을 보낼 때 서버의 터미널에 메시지를 표시하는 기본 Express 서버를 설정했습니다.

Shopify Webhooks에 서버를 매핑하기 전에 터널을 설정해야 합니다.

HTTPS 트래픽 터널 설정

Webhooks를 설정할 때 Shopify는 알림을 보낼 공개 URL을 제공할 것을 요청합니다.

공개 서버에서 이 튜토리얼을 진행 중인 경우 해당 서버의 URL을 사용하세요. 로컬 컴퓨터에서 이 튜토리얼을 진행 중인 경우 공개적으로 액세스 가능한 HTTPS URL로 터널을 만들어야 합니다.

먼저 다음 명령을 실행하여 ngrok를 설치합니다. 

npm install -g ngrok

다음으로, 다른 터미널 창을 시작하고 다음 명령을 실행하여 로컬 서버에 대한 터널링된 URL을 가져옵니다.

ngrok http 3000
Forwarding                    https://xxxx-xxx-xxx-xxx-xxx.ngrok.io

다음 단계에 필요하므로 이 URL을 메모해 두세요. 이 클라이언트를 다시 시작하면 새로운 URL을 얻게 되고 그에 대한 모든 참조를 업데이트해야 합니다.

Shopify에서 Webhooks 만들기

Shopify 매장 관리자로 들어가서 설정 > 알림으로 이동합니다. 이동하고 나면 Webhooks로 스크롤을 내려 Webhooks 만들기를 클릭합니다.

'주문 생성'에 대한 Webhooks를 추가하고 앞의 섹션에서 만들었던 터널 URL 또는 공개 URL을 지정합니다.

다른 터미널에서 node index.js로 로컬 서버를 실행하고 테스트 알림 보내기를 클릭합니다.

이 과정이 잘 진행되었다면 서버의 터미널에서 "네, 주문을 받았습니다."라는 메시지를 받게 됩니다.

이제 Shopify 매장과 Express 서버 사이에 유효한 연결이 설정되었습니다. 다음으로, 고객이 주문을 접수하면 WhatsApp 메시지 템플릿을 고객에게 보낼 것입니다.

'order_notification' 템플릿으로 맞춤 메시지 보내기

먼저 터미널에서 다음 명령을 실행하여 Axios를 설치합니다.

npm i axios

Axios를 사용하여 WhatsApp 메시지를 고객에게 보내기 위한 POST 요청을 보낼 것입니다.

Axios가 설치된 후에 프로젝트 폴더에서 customMessage.js라는 이름의 또 다른 파일을 만들고 다음 코드를 사용하여 axios와 express를 파일로 가져옵니다. 

const axios = require('axios').default
const express = require('express')
const app = express()

이제 다음을 실행하여 Shopify에서 주문 생성 알림을 처리하기 위한 경로를 생성합니다. 

app.post('/webhooks/orders/create', async (req, res) => {
const body = await getRawBody(req);

const order = JSON.parse(body.toString());

console.log("Yes, We got an order!", order.customer.phone);
  
// Remaining code will go here

})

Shopify가 주문을 받고 /webhooks/orders/create를 호출하면 비동기식 콜백 함수와 JavaScript 개체의 두 번째 인수인 res 내부의 경로로 주문 상세 정보가 전달됩니다.

다음으로, 주문 상세 정보에서 고객의 전화번호, 이름, 주문 ID를 가져와서 이를 사용하여 API 요청 매개변수를 구성합니다.

        const data = {
        "messaging_product": "whatsapp", 
         "to": `${order.customer.phone}`, 
        "type": "template", 
         "template": { 
        "name": "order_confirmation", 
        "language": { "code": "en_GB" },
        "components": [
        {
          "type": "body",
          "parameters": [
          {
            "type": "text",
            "text": `${order.customer.first_name}`
          },
          {
            "type": "text",
            "text": `${order.id}`
          }
        ]
      }
    ] 
  } 
}

위의 개체에는 요청을 완료하는 데 필요한 모든 매개변수가 포함됩니다. 개체에서 지정한 템플릿 이름이 앞서 WhatsApp 비즈니스 관리자에서 만든 이름과 일치하는지 확인합니다.

다음으로, 중첩된 헤더 개체가 있는 구성 개체를 만듭니다. 헤더 내부에서 WhatsApp 액세스 토큰을 Authorization 값으로 설정(ACCESS_TOKEN을 토큰으로 변경)하고 application/json을 Content-Type으로 설정합니다.

 const config = {
 headers: { Authorization: `Bearer <ACCESS_TOKEN>`, 'Content-Type':   'application/json'}
};

다음으로, Axios로 POST 요청을 만들고 구성 개체와 데이터 개체를 인수로 전달합니다. then과 catch 메서드를 중첩하여 결과를 표시합니다(프로미스가 실패할 경우 오류 메시지 표시).

  if (order.customer.phone) {
   return res.sendStatus(403);
  } else {
  axios
  .post(
    "https://graph.facebook.com/<API_VERSION>/<YOUR_WABA_ID>/messages",
  data,
  config
  )
  .then((result) => console.log(result))
  .catch((err) => console.log(err));

  return res.sendStatus(200);
}

YOUR_WABA_ID를 WhatsApp 앱 대시보드의 WhatsApp 비즈니스 ID로 바꾸고 API_VERSION을 호환되는 클라우드 API 버전(기본값 v15.0)으로 바꿉니다.

앱이 설정되었습니다!

앱을 테스트하려면 ngrok 터널이 아직 실행 중이어야 하고 별도의 터미널에서 Express 서버를 시작해야 합니다.

node customMessages.js

기타 Shopify 이벤트

Shopify는 주문 접수 외에도 다양한 이벤트에 대해 50개 이상의 Webhooks를 제공합니다. 장바구니 생성과 업데이트, 제품 컬렉션 생성과 업데이트, 청구 시도 성공 및 실패 및 기타 여러 가지를 구독할 수 있습니다.

이러한 Webhooks를 사용하려면 Shopify 관리자에서 새로운 Webhooks를 만들고 이 주제를 Express 서버에서 경로로 등록하는 방법으로 위에서 설명한 것과 유사한 패턴을 따라 하세요.

앞에서 보았듯이, WhatsApp Business 플랫폼은 Shopify 매장에서 발생한 이벤트를 기반으로 수동 또는 프로그래밍 방식으로 고객과 원활하게 소통하는 데 도움을 줍니다.

Shopify의 WhatsApp 통합을 사용하면 실시간으로 고객에게 일괄 메시지를 보낼 수 있습니다. 메시지는 자동(예: 이벤트 기준) 또는 수동으로 전송할 수 있습니다. 메시지를 쉽게 설정할 수 있을 뿐만 아니라 손쉽게 확장할 수도 있습니다. WhatsApp과 Shopify를 페어링하면 일관되고 효과적이면서도 영향력 있는 고객 소통이 가능합니다.

WhatsApp을 앱과 프로젝트에 통합하는 방법에 대해 자세히 알아보려면 다른 개발자 튜토리얼을 참조하세요.


태그:
개발자 도구플랫폼2023년WhatsApp
관련 뉴스

WhatsApp Business 플랫폼과 HubSpot 통합

개발자 도구플랫폼2023년WhatsApp
2023년 3월 13일

페이지 인사이트 API 업데이트

비즈니스 도구개발자 도구플랫폼2023년그래프 APIFacebook
2023년 12월 14일

개발자를 위한 필요한 조치 대시보드 도입

개발자 도구플랫폼2023년Facebook
2023년 11월 8일
소식 더 보기