これは、埋め込み登録プロセスでユーザーが事業者情報を再入力しなくて済むようにするためのオプション機能です。
Facebookログイン設定でextras
オブジェクトのsetup
パラメーターを使用して、埋め込み登録フローの事前入力フォームのデータを渡すことができます。すべてのデータフィールドを渡すことも、フォームで入力するサブジェクトを渡すこともできます。たとえば、事業者の名前、メールアドレス、電話番号のみを保持している場合は、その情報だけを渡すことができます。
<script>
window.fbAsyncInit = function () {
// JavaScript SDK configuration and setup
FB.init({
appId: 'meta-app-id', // Meta App ID
cookie: true, // enable cookies
xfbml: true, // parse social plugins on this page
version: 'v19.0
' //Graph API version
});
};
// Load the JavaScript SDK asynchronously
(function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "https://connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
// Facebook Login with JavaScript SDK
function launchWhatsAppSignup() {
// Conversion tracking code
fbq && fbq('trackCustom', 'WhatsAppOnboardingStart', {appId: 'your-facebook-app-id', feature: 'whatsapp_embedded_signup'});
// Launch Facebook login
FB.login(function (response) {
if (response.authResponse) {
const code = response.authResponse.code;
// The returned code must be transmitted to your backend
// there must then perform a server-to-server call to our servers for an access token
} else {
console.log('User cancelled login or did not fully authorize.');
}
},
{
config_id: <CONFIG_ID>, // configuration ID goes here
response_type: 'code', // must be set to 'code' for System User access token
override_default_response_type: true, // when true, any response types passed in the "response_type" will take precedence over the default types
extras: {
setup: {
business: {
name: 'Acme Inc.',
email: 'johndoe@acme.com',
phone: {
code: 1,
number: '6505551234'
},
website: 'https://www.acme.com',
address: {
streetAddress1: '1 Acme Way',
city: 'Acme Town',
state: 'CA',
zipPostal: '94000',
country: 'US'
},
timezone: 'UTC-08:00'
},
phone: {
displayName: 'Acme Inc',
category: 'ENTERTAIN',
description: 'Acme Inc. is a leading entertainment company.',
}
}
}
});
}
</script>
setup
パラメーター次の表は、埋め込み登録フローのUIの、事前入力フォームデータのフィールド一覧です。
フィールド | 説明 |
---|---|
型: 文字列 | 事業者の名前。 例: |
型: 文字列(有効なメール形式) | 事業者のメールアドレス。 例: |
型: 文字列(有効なURL形式) | 事業者のウェブサイトURL。 例: |
型: 数字 | 国際電話の国番号。 例: |
型: 文字列 | 事業者の電話番号。国際電話の国番号は含めないでください。 例: |
型: 文字列 | 事業者の所在地の町名・番地(1行目) 例: |
型: 文字列 | 事業者の所在地の町名・番地(2行目) |
型: 文字列 | 事業者の所在地の都市。 例: |
型: 文字列 | 事業者の所在地の州または都道府県。 例: |
型: 文字列 | 事業者の所在地の郵便番号。 例: |
| 事業者の所在地の国。 例: |
型: 協定世界時(UTC)との差の形式。例: "UTC -08:00"。 | 事業者のタイムゾーン。 例: |
型: 表示名ガイドラインに準拠した文字列。 | WhatsAppクライアントでエンドユーザーに表示される、WhatsApp事業者のプロフィールの表示名。 例: |
| WhatsApp事業者の業種。利用可能な値については、下記の「WhatsApp事業者のプロフィールのカテゴリ」にある表をご覧ください。 例: |
型: 文字列(最大256文字) | 事業者の説明。 |
次の表は、WhatsApp事業者のプロフィールのカテゴリで、事業者の業種を説明するために利用できる値のリストです。
カテゴリ | 利用可能な値 |
---|---|
自動車 |
|
美容、スパ、サロン |
|
衣服、アパレル |
|
教育 |
|
エンターテイメント |
|
イベントプランニング、サービス |
|
金融、銀行 |
|
食料品 |
|
公共サービス |
|
ホテル、宿泊施設 |
|
医療、健康 |
|
非営利 |
|
専門サービス |
|
販売、小売り |
|
旅行、交通 |
|
飲食 |
|
その他 |
|
設定が完了すると、クライアントに次のような画面が表示されます。