スケジュールにCSSやJavaScriptを追加する

このページでは、HTMLを使用して画面上のメッセージをカスタマイズする方法を説明し、CSSとJavaScriptスクリプトを組み込むことができるようにします。CSSを使用してページのスタイルを設定し、JavaScriptスクリプトを使用してウェブサイトに（視覚的な）機能を追加して、コンテンツを変更したり、情報を登録したりすることができます。このページの内容は、自己設定及び解決可能な一定水準の技術及び知識を持つ方のみにお勧めされる機能です。ウェブサイト上でのマニュアル提供以外に個別の設定に関する質問などは一切受け付けておりませんので、ご利用にあたっては十分なご理解の上で活用ください。

テキストフィールド内にHTMLを追加する方法についてさらに学ぶ
CSSを使用してスケジュールの外観を変更する
CSSを使用してウィジェットの外観を変更する
JavaScriptスニペットとその仕組みについてさらに詳しく知る
JavaScriptを挿入してスケジュールに動的な機能を統合する方法を学ぶ
スクリプトを使用する際の追加オプションを追加する（自動テキストや分析スニペットなど）

テキストフィールド内にHTMLを追加する

SuperSaaSでは、HTML、CSS、JavaScriptはHTMLコンテンツを許可するテキストフィールドにのみ挿入できます。HTMLをテキストフィールドに追加できる場所は4つあります：

レイアウト設定のメッセージボックス内
各スケジュールのConfigure > Layoutページにあるメッセージボックス内
Configure > DesignにあるカスタムフォームのHTMLコメントボックス内
HTMLがメールメッセージで有効になっている場合、Configure > Layoutページのメールメッセージボックス内

すべてのアカウントでJavaScriptが許可されているわけではありません。無料アカウントをお持ちの場合は、サポートに連絡してページにJavaScriptを追加することを許可してもらう必要があるかもしれません。メールメッセージにJavaScriptを追加することはできません。

CSSでスケジュールの外観を変更する

例えば、特定のスケジュールページに特定のスタイルを追加してウェブサイトに合わせたい場合は、CSSを使用できます。スクリプトと同様に、CSSはHTMLを許可する各メッセージボックスに追加できます。メッセージボックスのツールバーにある< >ボタンをクリックして、ソースコードテキストフィールドを開き、CSSを追加します。これをスケジュールに適用するには、基本的な技術知識が必要です。SuperSaaSでCSSを使用する方法は2つあります：インラインCSSを使用するか、外部スタイルシートをリンクすることができます。

インラインCSS

インラインCSSは、スケジュール内の個々のHTML要素に直接スタイルを適用できる方法です。これは、HTML要素の開始タグ内でstyle属性を使用することで行います。例えば、段落のテキストの色を緑に変更し、フォントサイズを16ピクセルに設定したい場合、次のようにインラインCSSを使用します：


	<p style="color: green; font-size: 16px;"> これは緑色のテキストとフォントサイズ16ピクセルの段落です。</p>

これは緑色のテキストとフォントサイズ16ピクセルの段落です。

インラインCSSは、ページの他の部分に影響を与えずに特定の要素のスタイルをすばやく変更するのに適しています。ただし、多くの要素に同じスタイルを適用する必要がある場合は、同じコードを毎回繰り返す必要があるため、実用的ではなくなります。

メールでのインラインCSS

SuperSaaSは2種類のメール形式を提供しています：プレーンテキストとHTML。デフォルトでは、メールはプレーンテキストで送信され、基本的なテキストのみが許可されます。画像やHTMLを含めたり、CSSのようなスタイリングを適用したい場合は、レイアウト設定ページでメールメッセージのHTML形式を有効にしてください。メールでは、ウェブページのようにCSSスタイルシートをサポートしていないため、インラインCSSを使用する必要があります。メールのHTML形式を有効にした後、上記で説明したようにインラインCSSを適用できます。

外部スタイルシートの使用

インライン CSS は小さな変更には便利ですが、CSS が大量にある場合は扱いにくくなり、外部 CSS スタイルシートを使用する方が適しています。外部スタイルシートにリンクするには、SuperSaaS に CSS ファイルを直接保存することはできないため、別のサーバー経由でスタイルシートにアクセスできることが重要です。別の CSS スタイルシートにリンクするための基本構造は次のようになります。:


	<link rel="stylesheet" href="https://{www.insertyoururl}/css/style.css">

HTMLコンテンツを許可するメッセージボックスのソースコードにCSSを適用した後、'保存’を押してページを訪れ、CSSが正しく適用されていることを確認してください。

ウィジェットにCSSを追加する

ウェブサイトに埋め込むことができるスケジュールウィジェットにもCSSを追加できます。ウィジェットのスタイリングをカスタマイズしたい場合、独自のCSSを追加するか（これは各フレームのstyleタグ間に配置されます）、外部スタイルシートにリンクすることができます。ただし、ウィジェットの構造と識別子は更新に伴って変更される可能性があるため、それらが同じままであることに依存しないでください。

var supersaas = new SuperSaaS("demo", "Therapist", {"custom_css": "h1 {color:red}"})
var supersaas = new SuperSaaS("demo", "Therapist", {"custom_css": "https://….css"})

SuperSaaSウィジェットのカスタマイズの詳細については、開発者向けドキュメントを参照してください。

SuperSaaSでスクリプトを使用する

JavaScriptスクリプトは、スケジュールページやフォームに動的な機能を統合して予約プロセスを強化するのに便利です。ライブチャット、ボタン、カウントダウン、Google AnalyticsやBingなどの分析サービス用のトラッキングスクリプトなど、さまざまなサービスや機能を統合できます。

例えば、次のスニペットはこのようなポップアップボタンを追加します。これは、顧客が予約ページを通じて予約する際に追加情報を表示するのに使用できます。


	<input onclick="window.open('//static.supersaas.net/img/demo_room.jpg', 'Popup', 'width=400,height=300')" type="button" value="Pop-up">

スクリプトを挿入する方法

メッセージボックスを見つける： JavaScriptスクリプトを追加したいメッセージボックスに移動します。このメッセージボックスは、上記で言及した場所のいずれかにあります
ソースコードテキストフィールドを開く： メッセージボックスのツールバーにある< >ボタンをクリックして、ソースコードテキストフィールドを開きます
スクリプトをコピーする： 統合したいサービスや機能のコードスニペットを取得します。例えば、ライブサポート用のライブチャットボタンや、Google Analyticsなどの分析サービスなどです
ソースコードテキストフィールドに追加して保存する： コードスニペットをSuperSaaSのソースコードテキストフィールドに貼り付けて保存をクリックします。その後、レイアウトページの下部までスクロールし、変更を保存ボタンをクリックします
テスト： コードを保存した後、コードスニペットを適用したページを訪れ、スクリプトが正しく適用されていることを確認します。複数のページでスニペットが必要な場合は、各カスタムメッセージボックスで挿入プロセスを繰り返します

各テキストフィールドには最大3000文字まで含めることができます。より多くのコードを含める必要がある場合は、スクリプト内でsrcタグを使用して外部HTMLファイルにリンクし、このタグをソースコードに配置します。これにより、文字制限を超えることなく大量のJavaScriptを追加できます。ページの読み込みを迅速にするために、srcタグにdefer属性を追加することをお勧めします。

SuperSaaS内の追加オプション

スクリプトでオートテキストを使用する

オートテキスト文字列は、メッセージが生成されるときに自動的に他のものに置き換えられる’マジックワード’のセットです。オートテキストステートメントは、メールや画面上のメッセージに便利です。ただし、HTMLでスクリプトと組み合わせて使用することもできます。画面上のメッセージのカスタマイズページで、HTMLで使用できるすべてのオートテキストステートメントを確認できます。

オートテキストは、条件付きでスクリプトを追加するためにも使用できます。例えば、支払いが成功した場合にのみスクリプトを追加するなどです。条件付きオートテキストステートメントにコードスニペットを追加するには、単に中括弧の中に追加します。

$if paid {ご利用ありがとうございます、$name様 <script>…</script>}

条件付きの$ifステートメントのおかげで、この場合、誰かが支払いを行った場合にのみコードスニペットがページ上で実行されます。支払いが失敗した場合や、管理者またはスーパーユーザーが支払いなしで予約を行った場合、スクリプトは実行されません。オートテキストを使用して、ユーザーがログインしている場合にのみチャットボットボタンを表示し、スーパーユーザーがログインしている場合はスキップすることもできます。

予約を追跡する他の方法

成功した予約を追跡する別の方法は、Configure > Processの下で予約の作成に成功した後、ユーザーをどこに送信しますか？にあなたのサイトのページのURLを追加することです。その「ありがとうございます」ページに、分析コードを含む独自のスクリプトを追加します。これは顧客が予約プロセスを完了した後にのみ表示されます。 URLには、$name、$id、$price、$slot_id、$email、$lang、$full_nameといった’マジックワード’を使用でき、これらはそれぞれ予約のログイン名、ID、価格、スロットID、メール、言語、フルネームに置き換えられます。そのページのスクリプトは、ユーザーがそこに到着したときにページから情報を収集できます。