どのようにエンドツーエンドの暗号化フィードバックウィジェットを構築

我々はPortabella最近Portabellaのフィードバックをリリースし、それはカスタマイズ可能な、エンドツーエンドの暗号化されたフィードバックウィジェットをあなたのサイトに数秒でドロップすることができます.これは、最初の統合のいずれかを介してportabellaの上に構築されて@portabella/sdk , しかし、それはPortabella自体の中で生きます、我々はそれ自身の製品としてそれを出さないことに決めましたas we did with PrivaNote ).
あなたが正確にPortabellaフィードバックが何であるかについて詳しく見たいならば、我々には着陸ページがありますhttps://portabella.io/feedback どこに見えるか、それについて少しマーケティング材料を見ることができます.
このチュートリアルでは、どのように動作し、どのように構築したかについての詳細情報を提供します.

概要
PortabellaフィードバックはPreact 我々のCDNを通して分配される装置.スクリプトをページに含めるときに変数を注入することができます.上で述べたように@portabella/sdk エンドツーエンドの暗号化データストレージを処理する.
サイトにウィジェットを含めるには、次のようなコードスニペットを含める必要があります.

<script
  async
  defer
  src="https://widget.portabella.io/bundle.js"
  data-pf-token="<YOUR_TOKEN>"
  data-pf-project-id="<YOUR_PROJECT_ID>"
/>

preactウィジェットの作成
DOMノードに対するpreactアプリケーションのレンダリングは非常に簡単です.これを実現するために、任意の空想フレームワークを使用しませんでした.コアでは、単純な「Hello World」コンポーネントをレンダリングするには以下のようになります

import { h, render } from "preact";

const element = document.getElementById("<ELEMENT_ID>");
render(<div>Hello World</div>, element);

他のすべてはちょうどこの概念の上に砂糖です.

注射スタイル
もちろん、CSSファイルを含むことによってウィジェットスタイルをオーバーライドすることはできますが、いいえコードタイプのアプローチでは、素敵なGUIでウィジェットをカスタマイズできます.
このプロセスは、ユーザーが自分のサイトに含めるよう依頼するエンドスクリプトを修正します.私たちが変更することによって意味するものはdata-pf-* 結果のスクリプトにタグを付けて、Preactコンポーネントのプロパティを取得し、プロパティを更新できます.
例えば、ウィジェットの主色はスクリプト側からこのように見えます

<script
  async
  defer
  src="https://widget.portabella.io/bundle.js"
  data-pf-token="<YOUR_TOKEN>"
  data-pf-project-id="<YOUR_PROJECT_ID>"
  data-pf-primary-color="blue"
/>

そして、私たちのpreactコンポーネントでは、その新しい色を適用するインラインスタイルを活用できます.

const primaryColor = element.getAttribute(`data-pf-primary-color`);

return (
  <div style={{backgroundColor: primaryColor}}>...</div>
);

フィードバックの節約
我々は設定可能なウィジェットのユーザーが自分のページに含めることができるパズルの最後の部分は、実際にportabellaにフィードバックを保存しています.
このプロセスはいくつかの行のコードに過ぎず、次のようになります.

async function submitFeedback ({ from, message, rating }) {
  const { Project } = await import("@portabella/sdk");
  const sdk = new Project(token, projectId);
  await sdk.fetchPublicKey();
  await sdk.addCard({
    title: "New Feedback submission",
    description: `
Rating: ${rating}

${from && `Submitted by: ${from}`}

${message}`
  });
}

我々は、このトリックをインポートする@portabella/sdk 提出は、それは少し重いですし、ウィジェットと対話しないユーザーを遅くしたくない.この方法を行うには、いくつかのKBをダウンロードして最初のバンドルを保持します.
Submit(そして、速いローディングアニメーション)をクリックした後に、あなたのユーザーフィードバックはあなたのPortabellaプロジェクトへの道です.エンドツーエンドの暗号化が簡単になりました!