クリップボードにコピーボタンを設置する
キャンペーンなどでよくある「ボタンをクリックすることでクリップボードにテキストをコピーする」機能を持ったボタンを制作するサンプルを制作します。
Notion側でのセットアップ
コピーボタンを設置したい場所へ以下のcodeを追加して、左上の言語をHTMLにします。
へクリップボードにコピーしてもらいたいテキストを入力します。
すると以下のようなボタンが表示されるようになります、こちらをクリックしていただければテキストがクリップボードに保存されます。
スタイルを変えたい場合には以下のCSSを管理画面の「追加CSS」へ追記してください。
下記のようなデザインのボタンになります。
更にクリップボードにコピーしたタイミングで、ブラウザへ”コピーしました”というテキストを表示させる場合には、bodyへのhtml挿入のコードを以下に変更します。
実装したサンプルは以下になります。
カスタマイズしたい場合には以下のように各CSSを追記していただければ可能です。