お祝いガイド

Pendoのガイドを使って、ユーザーのサインアップお祝いしてみました。

ユーザーがアプリサインアップ成功したり、ログイン１周年などの特別なマイルストーンを経た際、何か特別な演出をして盛り上げてあげたいなと思ってました。そこで、Pendoのガイドを少し工夫して紙吹雪(confetti)演出を追加してみました。

Pendoのガイドには、custom blockと呼ばれる独自のhtml/js/cssを追加できるモデュールが用意されています。

このcustom blockを使用してガイドに紙吹雪(confetti)を追加して、お祝いムードを盛り上げてみました。

Pendoのガイドを通常通り作成し、適当にテキストとボタンを追加

その後、custom code blockを追加しhtmlセクションに以下コードを追加します。

今回は紙吹雪パートはparty.jsライブラリを使用しました。

ガイドに追加したボタンをマウスオーバーしたら紙吹雪を飛ばすようになっています。(追加したボタンのクラス名を参照しています)

<!-- https://github.com/yiliansource/party-js -->

<script src="https://cdn.jsdelivr.net/npm/party-js@latest/bundle/party.min.js"></script>
<script>
    document.getElementById("pendo-button-bd5e6336").addEventListener("mouseover", function (e) {
    party.settings.zIndex="300001"
    party.settings.debug = false
    party.confetti(this, {
    shapes: ["star", "roundedSquare"],
    count: party.variation.range(40, 100),
	size: party.variation.range(0.6, 1.4),
    });
});
</script>

結果：

ニ〇ニ〇動画風

もうちょっと遊んでみましょう。

紙吹雪じゃなくニ〇ニ〇動画風なお祝いに変えてみました。

上記手順と同じく通常のbuilding blockを使用してガイドを作り、最後にcode blockを追加します。

ニ〇ニ〇動画のロジックは以下記事から拝借しました。ありがとうございます。
https://qiita.com/youtoy/items/051dc658025a3b21c7f0

code blockのhtmlセクションに以下を追加

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
<div id='nico'>
</div>

let count = 0;
const getRandom = (arr) => {
  return arr[Math.floor(Math.random() * arr.length)];
};

let arr = [
  "888888",
  "🐳",
  "おめでとうございます",
  "１周年だー",
  "🍇",
  "🍓",
  "🫐",
  "8888888888888888",
  "🍑",
  "全ての１周年族に告げる ...",
  "🍬",
  "🍭",
];

async function createText() {
  let guideContainer = document.getElementById('nico')
  if(guideContainer){
  let div_text = document.createElement('div');
  div_text.id="text"+count; //アニメーション処理で対象の指定に必要なidを設定
  count++;
  div_text.style.position = 'fixed'; //テキストのは位置を絶対位置にするための設定
  div_text.style.whiteSpace = 'nowrap' //画面右端での折り返しがなく、画面外へはみ出すようにする
  div_text.style.fontSize = '30px'
  div_text.style.left = (document.documentElement.clientWidth) + 'px'; //初期状態の横方向の位置は画面の右端に設定
  var random = Math.round( Math.random()*document.documentElement.clientHeight );
  div_text.style.top = random + 'px';  //初期状態の縦方向の位置は画面の上端から下端の間に設定（ランダムな配置に）
  div_text.appendChild(document.createTextNode(`${getRandom(arr)}`)); //画面上に表示されるテキストを設定
  document.body.appendChild(div_text); //body直下へ挿入

   //ライブラリを用いたテキスト移動のアニメーション： durationはアニメーションの時間、
   //        横方向の移動距離は「画面の横幅＋画面を流れるテキストの要素の横幅」、移動中に次の削除処理がされないようawait
  await gsap.to("#"+div_text.id, {duration: 5, x: -1*(document.documentElement.clientWidth+div_text.clientWidth)});

  div_text.parentNode.removeChild(div_text); //画面上の移動終了後に削除
}
    else{
        
    }
}

setInterval(createText, 300);

ニ〇ニ〇世代にはちょっと懐かしい弾幕でお祝いでした

結果：

まとめ

みなさんもガイドをカスタマイズしてちょっとした演出してみてはいかがでしょうか。