Alex Ruben
CalendlyをHostingerのウェブサイトにシームレスに統合する方法
HostingerのウェブサイトにCalendlyを追加するのはそれほど複雑ではありませんが、初めての場合は少し戸惑うかもしれません。ここでの目標は、訪問者がCalendlyにわざわざアクセスすることなく会議を予約できるように、スケジュールリンクを埋め込むことです。すべての機能を統合し、見た目もすっきりさせたい場合に非常に便利です。また、面倒な設定の問題に遭遇したり、コードが正しく表示されなかったりした経験がある方は、このガイドが頭を悩ませる場面を回避するのに役立つかもしれません。
HostingerサイトにCalendlyを埋め込む方法
Calendlyから埋め込みコードを取得する
まず、Calendlyアカウント（https://calendly.com）にログインし、予約してもらいたいイベントの種類を選びます。共有ボタン（通常は小さな矢印アイコン）を押し、「ウェブサイトに追加」を選択します。ここからが実用的です。インライン埋め込み、ポップアップウィジェット、ポップアップテキストなどのオプションが表示されます。基本的なニーズであれば、インラインスタイルまたはポップアップを選択してください。CalendlyがHTML/JavaScriptコードを生成します。それをすべてコピーしてください。少しごちゃごちゃしていても、よくわからない場合は変更しないでください。
設定によっては、この埋め込みコードが不安定になることがあります。特に誤って一部だけコピーした場合など、最初の試みではうまく動作しないことがあります。そのため、スニペット全体がクリップボードにコピーされたことを再度ご確認ください。
Hostingerにログインしてサイトエディタを開きます
次に、Hostingerアカウント（Hostinger >サイトの管理 >ウェブサイトの編集）にログインします。FTP経由の場合は、ウェブサイトのファイルに直接アクセスしてください。Hostingerの標準ウェブサイトビルダーをご利用の場合は、カスタムHTMLやブロックを追加できるセクションを見つける必要があります。WordPressをご利用の場合は、「ダッシュボード」>「ページ」に移動し、カレンダーを表示したいページを選択します。次に、Gutenbergエディタまたはお使いのページビルダープラグインを開きます。
コツはこれです。CalendlyコードをカスタムHTMLブロックまたはウィジェットに挿入します。ブロックエディターをお使いの場合は、「ブロックを追加」>「カスタムHTML」を選択します。WordPressでは、サイドバーに挿入する場合は通常「外観」>「ウィジェット」、ページコンテンツに直接挿入する場合は「ウィジェット」を選択します。
埋め込みコードを貼り付けて必要に応じて調整します
作成したHTMLブロックにコードを貼り付けます。ここで一部のユーザーが行き詰まることがあります。必ず全体をコピーしてください。不足している部分やタイプミスがあると、埋め込みが表示されない可能性があります。設定によっては、よりフィットさせたり、よりすっきりと見せたい場合は、幅や高さのパラメータを調整する必要があるかもしれませんが、通常はデフォルトのコードで問題なく動作します。重なったり、途切れたりするなど、見た目がおかしくなる場合は、コンテナCSSを調整するか、埋め込みコードを<div>max-widthスタイルの で囲むことを検討してください。
ページを公開または更新する
これは当たり前のことなのに、見落とされがちな点です。コードを追加したら、必ずページを保存、更新、または公開してください。公開されるまでは、Calendlyのスケジュール設定ウィンドウは表示されません。「公開」をクリックすると表示されるはずですが、パソコンによっては更新やキャッシュのクリアに数秒かかる場合があります。また、URLや埋め込みコードがコピー途中だと失敗する可能性があるので、念のため確認してください。
サイトでスケジューラをテストする
公開したら、新しいシークレットタブまたは別のデバイスでサイトを開いてください。特にモバイル端末で正しく表示されることを確認してください。設定によっては、すぐに更新されない場合はブラウザのキャッシュをクリアする必要があるかもしれません。また、予約手続きがスムーズに機能するかどうかも確認してください。訪問者がページをめくり、イライラするのは避けたいものです。
追加のヒントとトラブルシューティング
いくつか注意点があります。もしサイトが壊れているように見えたり、埋め込みが読み込まれなかったりする場合は、サイトがメンテナンスモードになっていないか、インラインJavaScriptをブロックするスクリプトが背後にないか確認してください。また、埋め込みコード全体がカスタムHTMLブロック内に含まれていることを確認してください。コピー＆ペースト時に小さなミスが発生し、一部が失われることがあります。それでも問題が解決しない場合は、キャッシュプラグインを一時的に無効にするか、ブラウザを変更して、それが原因かどうかを確認してください。
そして、奇妙なことが起こりました。特定のホスティング設定では、インライン スクリプトを適切に実行するために JavaScript を有効にする必要があるかもしれません。これは、サイト設定 > 詳細設定 > カスタム スクリプトで確認できます。
まとめ
Calendlyの埋め込みは、特にウェブサイト編集に慣れていない場合は簡単ではありませんが、一度設定してしまえば、手間が大幅に省けます。埋め込みコード全体をコピーし、複数のデバイスでテストするようにしてください。これで、スケジュール管理の問題が解決するかもしれません。
まとめ
- Calendlyの「ウェブサイトに追加」メニューから埋め込みコードを取得します
- HostingerまたはWordPressのカスタムHTMLブロックに貼り付けます
- ライブサイトで更新とテスト
- モバイルの応答性とスクリプトの権限を再確認する
結びの言葉
これをうまく機能させるには、特にサイトのセキュリティやキャッシュが厳重な場合は、少し手間がかかるかもしれません。しかし、一度設定すれば、訪問者はページを移動することなく直接予約できるようになります。これで問題が解決することを祈っています。もしうまくいかない場合は、キャッシュをクリアするか、別のブラウザで試してみてください。私の場合はうまくいきました。皆さんにもうまくいくことを願っています。