Zendesk Chatウィジェットの垂直オフセットと水平オフセット

問題の内容

WebサイトにZendesk Chatを追加すると、Chatウィジェットがページ上の一部の重要なボタンに重なってしまいます。

ヒント： この記事では、Chatウィジェットをオフセットする手順について詳しく説明します。ChatウィジェットかWeb Widgetのどちらを使用しているかを調べるには、次の記事を参照してください：自分のZendeskアカウントおよびWebサイトで使用しているウィジェットはどれですか？

解決のステップ

APIコードを使用して、ウィジェットを垂直方向または水平方向、あるいはその両方に移動します。これは、ボタンとウィンドウをブラウザウィンドウまたはモバイルアプリウィンドウの端からオフセットするものです。この記事では、ウィジェットボタンとウィジェットウィンドウをデフォルトの位置からオフセットする方法について説明します。

• 垂直オフセット

• 水平オフセット

• モバイルオフセット

重要：開始する前に、ウィジェットのスクリプトをページのHTMLソースコードに埋め込んで、サイトにウィジェットを追加します。 次に、埋め込んだチャットウィジェットのスクリプトに加えて、この記事に記載されているカスタマイズコードを追加します。

垂直オフセット

次のAPIコードを使用して、ブラウザウィンドウの端からのチャットボタンの垂直オフセットを設定します。

<script type="text/javascript">
$zopim(function() {
$zopim.livechat.button.setOffsetVertical(50);
});
</script>

必要に応じて、（）内の数値を変更できます。

チャットボタンのデフォルトの位置は、ページの右下隅です。垂直オフセットコードを適用すると、ボタンがページの上部に向かって垂直方向に移動します。

次のAPIコードを使用して、チャットボタンとともにチャットウィンドウを垂直方向にオフセットします。

$zopim.livechat.window.setOffsetVertical(50);

必要に応じて、（）内の数値を変更できます。

チャットウィンドウのデフォルトの位置は、ページの下から開きます。 APIコードを適用すると、チャットウィンドウがページの下部から指定した距離だけ開きます。

水平オフセット

次のAPIコードを使用して、ブラウザウィンドウの端からのチャットボタンの水平オフセットを設定します。

<script type="text/javascript">
$zopim(function() {
$zopim.livechat.button.setOffsetHorizontal(50);
});
</script>

必要に応じて、（）内の数値を変更できます。

水平オフセットボタンコードを適用すると、ボタンがページの左側に向かって水平方向に移動します。

次のAPIコードを使用して、チャットウィンドウを水平方向にオフセットします。

$zopim.livechat.window.setOffsetHorizontal(50);

必要に応じて、（）内の数値を変更できます。

水平オフセットウィンドウコードを適用すると、ウィンドウがページの左側に向かって水平に移動します。

モバイルオフセット

以下のAPIコードを使用して、モバイルチャットボタンとウィンドウをオフセットすることもできます。

 <script type="text/javascript">
$zopim(function() {
$zopim.livechat.button.setOffsetVerticalMobile(30);
$zopim.livechat.window.setOffsetVerticalMobile(30);
$zopim.livechat.button.setOffsetHorizontalMobile(30);
$zopim.livechat.window.setOffsetHorizontalMobile(30);
});
</script>

必要に応じて、（）内の数値を変更できます。

詳細については、「Javascript API」を参照してください。

翻訳に関する免責事項：この記事は、お客様の利便性のために自動翻訳ソフトウェアによって翻訳されたものです。Zendeskでは、翻訳の正確さを期すために相応の努力を払っておりますが、翻訳の正確性については保証いたしません。

翻訳された記事の内容の正確性に関して疑問が生じた場合は、正式版である英語の記事を参照してください。