ホームページ作成「グーペ」 トップ » ホームページ作成お役立ち記事» ホームページ作成» 「Coubic」と「RESERVA」の予約ボタンをホームページに表示する方法

「Coubic」と「RESERVA」の予約ボタンをホームページに表示する方法

前回、予約サービス「Coubic」と「RESERVA」をグーペスタッフが使い比べてみました が、今回は、それぞれのフリープランで提供されている予約ボタンを「グーペ」に設定する方法をご説明します!

Coubic」の新規登録、または「RESERVA」のページ作成が済んでいる状態からのスタートとなりますので、予約サービスをこれから使ってみる!という方は、ご希望のサービスでの登録を完了してからご覧ください♪


「Coubic」予約ボタンを表示する

■「Coubic」管理メニューでの操作

まずは、「Coubic」にログインします。
管理メニューから「予約ボタンを設置」を選択します。

Coubic管理メニュー

「予約ボタンを設置」ページの「設置方法」部分を確認しながら、以下の手順ですすめます。

(1)ボタンのデザインを選ぶ
(2)「Coubic」で作成した予約ページを選ぶ
(3)コードをコピーする
※画像をクリックすると大きい画像をご覧いただけます。

Coubic予約ボタン

■「グーペ」管理画面での操作

今回はホームページのトップページに表示してみるので、管理画面の「トップページ設定>ウェルカムメッセージ」の操作方法になります。

(4)エディタを「HTML入力」モードにする
※画像をクリックすると大きい画像をご覧いただけます。

グーペ管理画面

(5)(3)でコピーしたコードを貼りつける
※画像をクリックすると大きい画像をご覧いただけます。

グーペ管理画面

【ポイント】
ボタンの前後にテキストを表示したい場合は、ボタンを以下のタグでかこうことで、ひとつの段落となり、テキストとボタンの間隔があきます。

<p>~</p>

(6)更新ボタンをクリックする

グーペで作成したホームページ

「RESERVA」予約ボタンを表示する

■「RESERVA」管理メニューでの操作

まずは、「RESERVA」にログインします。
管理メニューから「集客・タグ>予約するボタン」を選択します。

RESERVA管理メニュー

「予約するボタン」ページの「設置方法」部分を確認しながら、以下の手順ですすめます。

(1)ボタンのデザインを選ぶ
(2)「RESERVA」で作成した予約ページを選ぶ
(3)コードをコピーする
※画像をクリックすると大きい画像をご覧いただけます。

RESERVA予約ボタン

■「グーペ」管理画面での操作

今回はホームページのトップページに表示してみるので、管理画面の「トップページ設定>ウェルカムメッセージ」の操作方法になります。

(4)エディタを「HTML入力」モードにする
※画像をクリックすると大きい画像をご覧いただけます。

グーペ管理画面

(5)(3)でコピーしたコードを貼りつける
※画像をクリックすると大きい画像をご覧いただけます。

グーペ管理画面

【ポイント】
ボタンの前後にテキストを表示したい場合は、ボタンのコードを以下のタグでかこうことで、ひとつの段落となり、テキストとボタンの間隔があきます。

<p>~</p>

(6)更新ボタンをクリックする

グーペで作成したホームページ

いかがでしたか。上記の手順を見ながら操作してみると、簡単に予約ボタンを表示できることがわかります♪
予約サービスのコードって?どこに貼りつければいいんだろう?と思っていた方も、ぜひチャレンジしてみてください!


その他の関連記事