SuperSaaS-FAN
〜 SuperSaaSの使い方 〜

Loading...

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

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

【修正更新:2022-06-22】ウィジェットエディタが正式化
ベータ版として公開されていたウィジェットエディタからベータ版表記が削除されて正式化されました。
伴い、SuperSaaS日本語版サイトでもウィジェットエディタページが新設されましたが、翻訳が間に合っていない箇所や機械翻訳そのままの箇所など散見され、現状ではかなりわかりにくい不安定な状態に感じられますので、このページではオリジナルの英語版サイトに準拠した内容としています。

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

ウィジェットエディタページ

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

SuperSaaSウィジェットエディタ

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

ウィジェットを生成するためには、ウィジェットエディタページでSuperSaaSにログインしておく必要があります。
ページにログインの案内がありますのでloginをクリックしてログインすることで利用できます。

ログインすると利用できます

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

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

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

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

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

ウィジェットの種類

SuperSaaSウィジェットの種類

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

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

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

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

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

SuperSaaSボタン型ウィジェットエディタの設定

ボタン型の場合、設定の上にも独自のプレビューが表示されます。
ただし、このプレビューは見た目だけのプレビューのようでクリックしても反応しません。

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

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

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

Choose widget type

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

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

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

Choose a Button or a Frame

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

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

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

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

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

Customize widget

表示されるウィジェットのオプション設定です。

【修正更新:2022-08-08】設定が追加
Show a list of schedules firstが追加されました
【修正更新:2022-05-31】設定が追加
Service selector、Button labelが追加されました

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
チェックを入れることで直近で予約可能な日付のスケジュールで表示します。
チェックがない場合は予約可能の可否にかかわらず現在の日付でスケジュールが表示されます。
Hide finish time
チェックを入れることで予約開始時間のみの表示として、予約の終了時間を非表示にできます。
Hide slot titles
定員制タイプに対するウィジェットのみの設定です。
予約対象となるスロットのタイトルを非表示にできます。
「List」型と「Cards」型では有効なのですが、「Calendar Month」型ではタイトルが非表示にならないようです。
Hide level pie chart icon
定員制タイプに対するウィジェットのみの設定です。
何かのアイコンを非表示にできるようですが、レベル円グラフが何を指すのかわかりませんでした。

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

Show a list of schedules first
チェックを入れることで、ウィジェット作成時にどのスケジュールを選択していようとも、順列的な一番先頭のスケジュールが強制的に表示されるようになります。

スケジュールタイプごとに設定できる項目が異なるのに、作成時と表示でタイプが異なったときなどややこしいことになりそう…
そもそも、どういう時に使う設定なんでしょうね?

未実装オプション群

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

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

Code snippet to put on your site

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

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

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

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

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

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

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

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

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

ウィジェットエディタはようやくベータ版表記が外れ正式化したばかりです、公式からの詳細な機能紹介はなく、新機能としてのアピールが散見される程度です。
現時点での活用はいろいろと模索が必要かもしれません。

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