DevOps Tools Engineer試験のObjective

• Vtiger CRM 内に外部ツールを直接統合することで、シームレスなユーザー エクスペリエンスを提供します。
• CRM とサードパーティ アプリケーション間の切り替えの必要性をなくすことで効率性を高めます。
• さまざまなサードパーティの Web サイトやプラットフォームとの統合を可能にすることで柔軟性を実現します。

技術的な実装

モジュールデザイナーのポップアップスクリプト

• ポップアップを作成および管理するためのロジックは、モジュール デザイナー スクリプト内に記述されます。
• これらのスクリプトは動的に挿入されるため、コア CRM ファイルを変更せずに柔軟に配置できます。

フック登録: GLOBAL_ACTION

• カスタム フックは、Vtiger の GLOBAL_ACTION フックを使用して登録されます。
• このフックを使用すると、Vtiger 内のさまざまなビューまたはモジュールにカスタム UI 要素 (アイコン、ボタンなど) を追加できます。

アイコンのレンダリングとインタラクション

• カスタム フックは、CRM インターフェースの必要な場所にアイコンまたはボタンをレンダリングします。
• アイコンをクリックすると、埋め込まれた iframe を含むポップアップが作成され、外部 Web サイトが読み込まれます。

iframeの埋め込み

• iframe はポップアップに動的に挿入され、指定された外部 Web サイトを読み込みます。
• iframe コンテンツはポップアップ コンテナーに合うようにスタイル設定されており、タブを切り替える必要がなく CRM 内で完全に機能します。

このアプローチの利点

• コアの変更なし: このソリューションはフックとカスタム スクリプトを利用し、Vtiger のコア ファイルの整合性を維持します。
• モジュラー: iframe URL を更新することで、さまざまな外部ツールを埋め込むように簡単に拡張できます。
• ダイナミックインジェクション: iframe はユーザーがカスタム アイコンをクリックしたときにのみ作成されるため、UI は必要になるまでクリーンな状態が維持されます。
• カスタマイズ: アイコンと iframe ポップアップの配置、デザイン、スタイルを完全に制御します。

セキュリティに関する考慮事項

• CORS: 外部ウェブサイトはiframeの埋め込みを許可している必要があります。これは通常、X-Frame-OptionsやContent-Security-PolicyなどのHTTPヘッダーによって制御されます。
• HTTPS: 混合コンテンツ エラーを防ぐために、Vtiger と外部 Web サイトの両方が HTTPS を使用していることを確認します。
• アクセス制御: Vtiger に組み込まれているロールベースのアクセス制御を使用して、埋め込まれたポップアップにアクセスできるユーザーを制限します。

ユースケース: テレフォニー統合

シナリオある企業は、通話と顧客とのやり取りを管理するためにサードパーティ製のテレフォニーアプリケーション（例：Ozonetel）を使用しています。目標は、このテレフォニーシステムをVtiger CRMに直接統合し、カスタマーサービス担当者がCRMインターフェースを離れることなく通話を管理し、CRMレコードを更新できるようにすることです。

解決策Vtigerのカスタムポップアップを使用して、テレフォニーアプリケーションをCRMに組み込みます。エージェントはCRM内のアイコンをクリックすると、テレフォニーシステムを表示するiframeが開きます。この統合により、エージェントは以下のことが可能になります。

• CRMから直接電話をかけたり受けたりします。
• 通話履歴と顧客の詳細をリアルタイムで表示します。
• 通話のやり取りに基づいて CRM レコードを更新します。
• CRM 内で可用性ステータス (アクティブ、利用不可など) を変更します。

このソリューションにより、エージェントが CRM とテレフォニー アプリケーションを切り替える必要がなくなり、効率が向上し、コンテキストの切り替えが削減されます。

これらの例により、Vtiger CRM のエクスペリエンスが向上すると確信しています。開発者と CRM ユーザーが相互に情報と知識を共有し、CRM の機能をさらに向上できるようにしたいと考えています。

今後もご期待ください。楽しいコーディングを！

サインアップして最新のアップデートを受け取りましょう!