すべてのオプションは任意です。以下の値は、指定を省略した場合にクライアントが適用するデフォルト値です。
const entase = new Entase({
pk: null,
locale: 'auto',
checkoutMode: 'auto',
collectConsent: true,
backdrop: true,
backdropColor: '#000000',
tprm: {},
pane: { width: 800, height: '100%' },
popup: { width: 800, height: 1000 }
});オプション
| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
pk | string | null | 公開可能キーです。クライアントは、ドメインでインラインチェックアウトの使用が許可されているかを確認する際にこれを送信します。これがない場合、すべてのチェックアウトはポップアップとして開きます。 |
locale | string | 'auto' | チェックアウトの言語です。'auto' は <html> 要素の lang 属性を読み取ります。 |
checkoutMode | string | 'auto' | 'auto'、'pane'、または 'popup'。 チェックアウトモードを参照してください。認識されない値の場合は 'auto' にフォールバックします。 |
collectConsent | boolean | true | チェックアウトで訪問者に規約に関する通知への同意を求めるかどうかを指定します。一度同意すると、回答は Cookie に記憶され、以降この手順はスキップされます。 |
backdrop | boolean | true | チェックアウトの背後にあるページを暗くするかどうかを指定します。false にすると、ページのスクロールロックも無効になります。 |
backdropColor | string | '#000000' | 暗くする領域の色を、CSS カラー値として指定します。 |
tprm | object | {} | クエリパラメータとしてチェックアウト URL に追加されるトラッキングパラメータです。トラッキングと同意を参照してください。 |
pane | object | { width: 800, height: '100%' } | インラインパネルのサイズです。ポップアップモードでは無視されます。 |
popup | object | { width: 800, height: 1000 } | ポップアップウィンドウのサイズ(ピクセル単位)です。パネルモードでは無視されます。 |
パネルとポップアップのサイズ設定
pane.width には、数値(ピクセル)または任意の CSS 長さ指定('720px'、'50%'、'40vw'、calc() 式)を指定できます。数値のみを指定した場合はピクセルとして扱われます。
デスクトップではパネルの幅はこの値が上限となり、モバイルでは全幅になって pane.height が適用されます。両者の切り替えはビューポートが設定した幅より狭くなったときに行われます。幅を相対単位で指定した場合は、800px で切り替わります。
popup.width と popup.height にはピクセル単位の数値のみを指定でき、ウィンドウは訪問者の画面中央に配置されます。画面の高さが指定した高さに足りない場合、ウィンドウは収まるように縮小されます。
バックドロップ
ポップアップでは、下にあるページを非アクティブに見せる必要があるため、パネルよりもバックドロップが強く暗くなります。backdrop: false を設定すると暗転を完全に解除できます – この場合、チェックアウトの背後にあるページもスクロール可能なままになります。
backdropColor はそのまま適用されるため、有効な任意の CSS カラーを指定できます。バックドロップを隠す目的ではなく、ダークテーマやブランドに合わせたサイトに合わせるために使用してください。バックドロップを隠すには、backdrop: false が正しいオプションです。
予約ごとの上書き
checkoutMode、collectConsent、backdrop、backdropColor、pane、popup はすべて、book() に渡すことで単一の予約に対して上書きできます。インスタンスレベルの値は、以降の呼び出しでも変更されません。
const entase = new Entase({ pk: 'YOUR_PUBLISHABLE_KEY' });
// This one booking opens wider, with no dimming.
entase.book('EVENT_ID', {
pane: { width: '60vw' },
backdrop: false
});pk と tprm は予約ごとのオプションではありません – pk はページ全体のアカウントを識別し、トラッキングパラメータを変更する必要がある場合は setTracking() を使用します。