SuperSaaS-FAN
〜 SuperSaaSの使い方 〜

Loading...

ウィジェットエディタで簡単にSuperSaaSとホームページを連携

ウィジェットを用いたSuperSaaSとの連携

【修正更新:2024-08-09】ウィジェットのオプション設定Arrange per dayを追加
Customize widgetにArrange per dayが追加されていましたので準拠して追記しました。

【修正更新:2023-12-07】ウィジェット調整や改修に伴い、最新の情報でリライト
ウィジェットエディタが2022年6月に正式化されてから数々の調整や改修が行われてきました。
一度内容を見直して、直接コードを編集して追加できるウィジェットの拡張カスタマイズに関しての情報を最新御情報を加えるなど全体的なリライトを行いました。
なお、表記は最新情報となるSuperSaaS英語版サイトから引用しています。

SuperSaaS公式サイトでは、構築した予約システムと連携できるウェブサイトに埋め込むウィジェットを簡単に生成できるウィジェットエディタが公開されています。
ウィジェットエディタを用いると、誰でも簡単にホームページにSuperSaaS予約システムと連携するボタンや、埋め込みができるウィジェットが作れます。

ウィジェットエディタ

ウィジェットはJavescriptを用いており、HTML、CSSなどマークアップもモダンな設計となっていますので、古いレガシーな環境では動作しない場合があります。

ウィジェットエディタは公式サイトで公開されています。
SuperSaaS管理メニューの環境設定連携予約ボタンからもリンクして遷移できます。

SuperSaaSウィジェットエディタ

SuperSaaSのウィジェットエディタはオンラインで動的に生成することができます。

ページにログインの案内がありますのでloginをクリックしてログインして利用します。

同じブラウザの別タブなどでログインした状態でも、自分の予約システムと連携したウィジェットを生成するために、このページで改めてログインする必要があるようです。

アカウント内に複数のスケジュールを構築している場合、ログインした状態になるとSuperSaaSで構築したスケジュールがプルダウンとして選択できるようになりますので、ウィジェットを作成したい予約システムスケジュールを指定できるようになります。

ウィジェットエディタページには画面右側にプレビュー機能が付いていますので、どのようなウィジェットになるかを動的に画面上で確認しながら作成することができます。

SuperSaaSのウィジェットエディタはプレビュー機能付き

サイトページがレスポンシブな設計なので、プレビューは画面が狭いと右側でなく設定の下側に位置が移動します。
使い勝手を考えると、横に広めの画面で用いたほうが良いかもしれません。

ウィジェットの種類

SuperSaaSウィジェットの種類

SuperSaaSウィジェットの種類として、Buttonと、Frameの二種類から選択できます。

Button
クリックすることで対象となる予約システム画面をモダールウィンドウとしてポップアップで表示する、ボタン型ウィジェットです。
Frame
直接ウェブページに対象となる予約システム画面を埋め込む、フレーム(iframe)型のウィジェットです。

ボタン型はクリックが必要となるワンクッションがありますが、ただのボタンなので埋め込むページの見た目や構成といったデザインに影響しにくいです。
フレーム型は直接予約システムをページに埋め込みますので、ページの構成や見た目に影響が大きいですが訴求力が強いです。

Customize button style(ボタン型のウィジェット専用の追加設定)

ウィジェットの種類でボタンを選択した場合にのみ、ボタン型専用の設定が追加されます。
フレーム型の場合は必要ない設定なので表示されません。

ボタン型ウィジェットのカスタマイズ

Button label

ボタンに表示したい文字列を選択できます。
一番下の入力枠の選択肢は、その入力枠で設定した自由な文言をボタンに表示できます。

Button size and radius

ボタンの大きさや角の丸みをスライダーで調整できます。

Size
ボタンの大きさを調節できます。
大きさといっても、button要素のstyleのpaddingの値調整となっていますので、ボタンの文字と外周までの余白の調整です。
Radius
ボタンの角の丸みを調節できます。
button要素のstyleのborder-radiusの値調整です。

Label font, color and size

ボタンに表示される文字列に対する装飾を設定できます。

Font
表示用のフォンを選択できます。
button要素のstyleのfont-familyの値調整です。
Text Color
表示する文字の色身を調節できます。
button要素のstyleのcolorの値調整ですが、スライダー一つでの調節のためか、rgbが等しく調整されてグレースケール的な調節になっているようです。
Text Size
表示する文字の大きさを調節できます。
button要素のstyleのfont-sizeの値調整です。
Bold text?
チェックを入れることで表示する文字を強調装飾することができます。
button要素のstyleのfont-weightの値選択です。

Button color

ボタンの背景色を指定できます。
カラーマップからの視覚的な指定が可能です。
button要素のstyleのbackground-colorの指定です。

これらの設定は、button要素の設定をビジュアル的にしたものです。
独自の値にしたり、追加の設定を行いたい場合は生成されるコードのbutton要素を直接編集することも可能です。

Choose widget type

表示するウィジェットの形式を指定できます。

SuperSaaSウィジェットエディタのタイプ設定

4種類があり、全てのスケジュールタイプで利用可能な「Calendar Month(カレンダー表示)」、「List(リスト表示)」と、定員制タイプでのみ選択できる「Cards(カード型表示)」、リソースタイプとサービスタイプで選択できる「Buttons(ボタン型表示)」から選択できます。

ウィジェットの表示サイズ

ウィジェットの表示領域(大きさ)を指定できます。

SuperSaaSウィジェットの大きさの設定

「Width(横)」と「Height(縦)」で設定できます。
ウィジェット構成要素のwidthとheightの値となりますので、「px」や「%」、「vh」などでの指定が可能です。

ボタン型の場合はポップアップ処理で調整が入るようで、指定した値にならない場合があるようです。
Heightに「px」以外の相対的や動的となる設定はHTML構文的な壁がありますので、「px」での指定が無難です。

実運用時にはレスポンシブ対応など、生成されたコードのカスタマイズや、JSによる動的な追加調整など検討する必要があるかもしれません。

Customize widget

表示されるウィジェットのオプション設定です。
設定可能な項目はスケジュールタイプやスケジュール設定などで異なります。

SuperSaaSウィジェットのオプション設定

Menu
SuperSaaSのメニューバーの表示可否を指定できます。
Hideで非表示、Showで常駐表示と思われます。

Hideにすると非表示なのですが、ログインしていると表示されるようです。
あくまでログインしていないときの状態の設定となるようです?

Menu position
SuperSaaSのメニューバー位置を指定できます。
Topはウィジェット上部に。Bottomはウィジェット下部にメニューバーを配置します。
Unavailable
ボタン形式の場合の設定で、タイル状に並べられた時間帯別の予約ボタンのうち、予約できない時間帯のボタンに対する装飾を指定できます。
Dim (gray out)は非活性状態で表示します。
Hideは予約不可能なボタンを非表示にしますが、ボタンをタイリングした時に詰めて表示しないで歯抜け状態にして表示します。
Collapseは非表示にしたうえで、ボタンをタイリングした時に詰めて表示します。
利用できないボタンの装飾 
Service selector
対象となるスケジュールがサービスタイプで、複数のサービスが登録されていて最初にサービスを選択する設定になっている場合の設定です。
Service listは登録サービスをリスト表示して選択を促します。Dropdownはサービスをドロップダウン形式で選択を促します。
Button label
上のService selectorService listが選択されいる場合の設定です。
リスト表示されるサービスの選択ボタンに表示される文字列を指定できます。
Hide schedule title
チェックを入れることでスケジュールタイトルの表示を非表示にできます。
Auto-select first available date
チェックを入れることで直近で予約可能な日付のスケジュールで表示します。
チェックがない場合は予約可能の可否にかかわらず現在の日付でスケジュールが表示されます。
Arrange per day
リスト形式での表示時の選択肢で、チェックを入れることで日付で区切られたリスト表示にすることができます。
Hide finish time
チェックを入れることで予約開始時間のみの表示として、予約の終了時間を非表示にできます。
Hide slot titles
定員制タイプに対するウィジェットのみの設定です。
予約対象となるスロットのタイトルを非表示にできます。
「List」型と「Cards」型では有効なのですが、「Calendar Month」型ではタイトルが非表示にならないようです。
Hide level pie chart icon
定員制タイプに対するウィジェットのみの設定です。
何かのアイコンを非表示にできるようですが、レベル円グラフが何を指すのかわかりませんでした。

チェックをオンオフしながらいろいろいじってみましたが、どこが変化しか気づけませんでしたので、何かしら条件があるのかと思います…
また何かわかったら追記して更新しますね。

Show a list of schedules first
ウィジェット作成時にどのスケジュールを選択していようとも、スケジュールリスト表示を行います。
アクセスコントロールのルートURLにアクセスされた時の挙動設定でスケジュールをリストで表示を選択している場合のみの選択肢です。
未実装オプション群

まだ検討中のようですが、いくつか未実装の設定が見え隠れしていました。

Colors
何かしら色の指定ができる設定?
Hide
定員制タイプの設定のようで、満員のスロットを非表示にする設定?
Access
予約対象の詳細へのリンクを付与する設定?

Code snippet to put on your site

設定に合わせてリアルタイムにウィジェットコード(javascript)が動的に生成されます。

生成されたウィジェットコード

タイトル横のコピーアイコンCopyアイコンをクリックすることで、クリップボードにウィジェット生成用のソースコードをコピーできます。

ウィジェットコードは、ホームページなどに張り付けてすぐにでも利用が可能です。

ウィジェットの拡張カスタマイズ

ウィジェットエディタで簡単にウィジェットを埋め込むコードが生成できますが、生成されたコード直接編集してパラメータを追記することで、さらなる拡張カスタマイズを追加することもできます。

コードを直接編集しますし、ある程度開発者としてのコーディング知識が必要ですが、それほど難解なものでもありませんので、いろいろ試して見ると良いと思います!

要素スタイルのカスタマイズ

ウィジェットの構造要素に対してCSSを追加設定できます。

SuperSaaSオブジェクトパラメータ
定義名概要
custom_cssウィジェットに対してのCSS構文を記載できます

例:”custom_css”: “CSS内容”をSuperSaaSオブジェクトのパラメータに追記します
var supersaas = new SuperSaaS(“****,{****,“custom_css”: “h1 {color:red}”} )

カスタムドメインを指定

カスタムドメインを用いている場合、ウィジェットでもそのカスタムドメインをしてして用いることができます。

SuperSaaSオブジェクトパラメータ
定義名概要
domainカスタムドメインを指定できます

例:カスタムドメインにwww.hogehoge.co.jpを指定
var supersaas = new SuperSaaS(“****,{****,“domain: “www.hogehoge.co.jp” } )

対象となるリソースやスロットを指定

予約システム上に設定されているリソースやスロットを指定することができます。

SuperSaaSオブジェクトパラメータ
定義名概要
select対象となるリソース名、もしくはスロットIDを指定できます

例:リソース1を指定する
var supersaas = new SuperSaaS(“****,{****,select: “リソース1”} )

例:スロット(ID:123456)を指定する
var supersaas = new SuperSaaS(“****,{****,select: 123456} )

日付を指定する

ウィジェットの内容を指定した日付のものにすることができます。
現状で月と日を指定できます。

SuperSaaSオブジェクトパラメータ
定義名概要
month月を数字で指定できます
day日を数字で指定できます

例:12月の表示にする
var supersaas = new SuperSaaS(“****,{****,month:12} )

例:当月の9月の表示にする
var supersaas = new SuperSaaS(“****,{****,day:9} )

例:5月1月の表示にする
var supersaas = new SuperSaaS(“****,{****,month:5,day:1} )

ウィジェット配置を指定

ウィジェットは基本的にscriptを記載した位置に挿入されますが、ページ構成する要素のID(セレクター)を指定することでその直下に配置(挿入)することができます。

SuperSaaSオブジェクトパラメータ
定義名概要
container挿入対象としたい対象要素のID(セレクター)を指定できます

例:ウィジェットをid=”wgtbox”としている要素の直下に挿入する
var supersaas = new SuperSaaS(“****,{****, “container: “#wgtbox” } )

対象スロットの指定(色で指定)

定員制タイプ予約システム専用
ウィジェットで表示する対象スロットを設定された色で指定したもののみにできます。

SuperSaaSオブジェクトパラメータ
定義名概要
color対象にするスロットを色番号で指定できます

例:表示する対象を色番号が3のスロットのみにする
var supersaas = new SuperSaaS(“****,{****, coclor: 3 } )

リソースのプルダウン表示を指定

リソースタイプ予約システム専用
リソースタイプで10以上のリソースが設定されている場合、折りたたんだアコーディオン表示を用いることができます。

SuperSaaSオブジェクトパラメータ
定義名概要
res_layoutaccordion / simple で表示形式を指定できます

例:リソース表示形式をアコーディオンにします
var supersaas = new SuperSaaS(“****,{****, “res_layout”: “accordion” } )

例:リソース表示形式をデフォルト(列記)にします
var supersaas = new SuperSaaS(“****,{****, “res_layout”: “simple } )

表示する大きさを指定

ウィジェットを表示するフレームやポップアップ(モーダル)のサイズを指定できます。height, width, max_width ウィジェット フレームのデフォルト サイズをオーバーライドする
modal_width, modal_max_width モーダルフレームのデフォルトサイズをオーバーライドする
z_index ポップアップの下の灰色のオーバーレイのデフォルトの Z インデックスをオーバーライドします。

SuperSaaSオブジェクトパラメータ
定義名概要
heightウィジェットを構成するiframe要素の高さを指定できます
widthウィジェットを構成するiframe要素の幅を指定できます
max_widthウィジェットを構成するiframe要素の最大幅を指定できます
modal_widthポップアップ(モーダル)するウィジェットの幅を指定できます
modal_max_widthポップアップ(モーダル)するウィジェットの最大幅を指定できます
z_indexポップアップ(モーダル)するウィジェットのz_index値(重なり)を指定できます

例:ウィジェットフレームの高さを300px、幅をauto、最大幅を500pxにします
var supersaas = new SuperSaaS(“****,{****, “height”: “300px”, “width”: “auto”, “max_width”: “500px” } )

例:ポップアップするモーダルウィンドウの幅をauto、最大幅を600pxにします
var supersaas = new SuperSaaS(“****,{****, “modal_width”: “auto”, “modal_max_width”: “600px”, } )

例:ポップアップするモーダルウィンドウのz_indexを999999にする
var supersaas = new SuperSaaS(“****,{****, “z_index”: 999999 } )

インスタンス時の初期動作(非アクティブ生成)

ウィジェットがインスタンスされるときの初期動作でshow()メソッド待ちの非アクティブ化ができます。

SuperSaaSオブジェクトパラメータ
定義名概要
widget_typeclosed を指定することでshow()メソッドが実行されるまで非アクティブにすることができます

例:ウィジェットのh1要素の文字色を赤にする
var supersaas = new SuperSaaS(“****,{****, “widget_type”: “closed } )

予約情報の内包

ウィジェットに予約時に必要な情報を内包させて反映することができます。

SuperSaaSオブジェクトパラメータ
定義名概要
prefill予約用の情報を必要なフィールドごとに指定できます

例:予約用にあらかじめ名前に「山田太郎」、メールアドレスに「test@test.com」を内包
var supersaas = new SuperSaaS(“****,{****, prefill: { “name” : “山田太郎”, “email” : “test@test.com”, } } )

指定した既存ユーザーでログインした状態でウィジェットを表示する

supersaas_api_userにユーザーネームを、supersaas_api_checksumにチェックサムの値を指定してウィジェットを表示するためのJavascriptコードの前に、同じくJavascriptで記載するだけで、ウィジェット表示時に指定ユーザーとしてログインした状態にできます。

必要定義変数
定義名概要
supersaas_api_userログイン状態にしたい既存のユーザー名を指定します
supersaas_api_checksum対象ユーザー用のMD5ハッシュ化された認証キーを指定します

例:
<script>
var supersaas_api_user = {“name”:”ログインしたいユーザーネーム“};
var supersaas_api_checksum = “対象ユーザー用のMD5ハッシュ化されたチェックサム“;
</script>
↓ウィジェット表示コード↓
<script src=”https://cdn.supersaas.net/widget.js”></script>
<script class=”supersaas-widget”>ウィジェット表示用のコード</script>

新規ユーザー登録あるいは、更新してログインした状態でウィジェットを表示する

ウィジェットを表示するためのJavascriptコードの前に、同じくJavascriptで新規ユーザーを構成するユーザー情報を記載します。

supersaas_api_user_idには末尾に「fk」を付与する外部キーID(任意の数値)で指定します。
外部キーIDの既存ユーザー情報があればそのユーザー情報を上書き更新し、存在しない外部キーIDであれば新規ユーザーとしてユーザー情報が追加されます。

supersaas_api_userにはユーザー情報を。supersaas_api_checksumにはユーザー登録に必要なMD5ハッシュ化されたキー文字列を指定します。

ユーザー情報の更新にユーザー名が含まれる場合は、そのユーザー名がチェックサムにも用いられているためsupersaas_api_checksumの値が新ユーザー名から作成されている必要がありますので留意が必要です。
コール用フィールド
(物理名)
論理名
概要
supersaas_api_user_idユーザー固有の一意な管理用IDです
SuperSaaSの管理ユーザーIDとは異なる外部キーIDです
末尾に「fk」を付与して指定します
supersaas_api_userユーザー情報の内容です
構成はアクセスコントロールで指定されているユーザー情報の構成に準拠します
JSON形式で指定します
supersaas_api_checksum対象ユーザー用のMD5ハッシュ化された認証キーを指定します

例:
<script>
var supersaas_api_user_id = “外部キーIDfk”;
var supersaas_api_user = {“name”:”ユーザー名”,”full_name”:”フルネーム”,”phone”:”電話番号”,”address”:”住所”など必要なユーザー情報};
var supersaas_api_checksum = “対象ユーザー用のMD5ハッシュ化されたチェックサム“;
</script>
<script src=”https://cdn.supersaas.net/widget.js”></script>
<script class=”supersaas-widget”>var supersaas = new SuperSaaS(“174981:SSS-FAN”,”396461:chk_r000″,{“widget_type”:”frame”})</script>

ウィジェットからのアクセスを無効化したい場合

SuperSaaSでスケジュールを構築時のデフォルトは、ウィジェットからのアクセスを許可している状態です。

もし、ウィジェットからのアクセスを無効化したい場合は、対象スケジュールの設定レイアウトで有効/無効の切り替えを設定することができます。

どの表示形式でご利用されますか別サイトのウィジェットとしての統合を許可するのチェックを外すことで、ウィジェットからのアクセスをブロックすることができます。

SuperSaaSのウィジェットは産声を上げたばかり

ウィジェットエディタはベータ版表記が外れ正式化してしばらく経ちましたが、度重なる拡張や調整が続き、いろいろと模索されている様子が窺えます。
長い目と温かい目で見守りつつ、上手な活用をしていきましょう。

キモはwidget.jsですし、いろいろ活用の検討ができるかも。
ただ、ポップアップJavascriptにしろ、Ifreamにしろ、レスポンシブな対応設計や、複数のウィジェットを埋め込んだりなどの競合、キャッシュやセッションなどの不測の諸問題など、公式サポートを活用しながら十分な動作確認をもって実装としたいですね!