「Air Copy to clipboard」とは？
「Air Copy to clipboard」は、Bubbleでクリップボードにテキストをコピーする機能を簡単に実装できるプラグインです。このプラグインを使えば、ユーザーがボタンをクリックするだけで指定したテキストをコピーできるようになります。
プラグインの追加はこちらから↓
Air Copy to clipboard Plugin page on Bubble. Use this plugin…
実装方法
プラグインを追加
Pluginタブから「Air Copy to clipboard」と入力するか、以下のリンクから追加します。
Air Copy to clipboard Plugin page on Bubble. Use this plugin…
必要なElementを追加・設定する
以下のエレメントを追加します。
- Text エレメント
- Buttonエレメント
次に、追加したテキストエレメントを選択して設定画面を開き、Apperenceタブの下部にある「ID Attribute」に、任意のid名を指定します。
ID Attributeが表示されない場合、画面左側の”Settings”タブ > Generalの一番下にあるAdvanced Optionsの「Expose the option to add an ID attribute to HTML elements」をONにしてください
ワークフローを設定する
ボタンクリックをトリガーとしたイベントを追加し、アクション「Copy to clipboard from element」を追加します。
アクションの設定項目”Element ID”に、テキストエレメントのID Attributeに設定したID名を入力します。そのほかの項目の説明は以下の通りです。
| 項目 | 概要 |
|---|---|
| Delay(Seconds) | クリックしてからコピーを行うまでの遅延時間（秒）を設定します。 |
| Copy HTML | ONにすると、指定したIDを持つエレメントのHTMLコードをコピーします。 |
Copy HTMLの解説
上記の場合のコピー内容はON/OFFでそれぞれ以下の通りです。
ON → “コピーの対象となるテキストを入力”
OFF → 以下の通り
<div>コピーの対象となるテキストを入力</div>以上で実装は完了です。
「Air Copy to clipboard」を使えば、簡単にテキストのコピー機能を実装できます。ユーザー体験を向上させるために、ボタンのデザインやコピー完了の通知なども工夫するとより良いUXになります。