جاسازی یک داشبورد متابیس در Zendesk

یک چیز جالب در مورد متابیس این است که می‌توانید یک داشبورد را در برنامه‌هایی که هر روز استفاده می‌کنید جاسازی کنید.

ما اخیراً داشبورد مشتری خود را مستقیماً در Zendesk جاسازی کردیم. داشتن این داشبورد در کنار تیکت‌های پشتیبانی به ما امکان می‌دهد اطلاعات مشتری را بدون نیاز به جابجایی بین متابیس و Zendesk ببینیم. ما حتی چند پارامتر فیلتر را برای فیلتر کردن خودکار روی مشتری و سازمان در داشبورد منتقل کردیم، که به طور قابل توجهی سرعت عیب‌یابی مسائل را افزایش داد.

داشبورد شامل موارد زیر است:

• اطلاعات حساب: نام مشتری، زمانی که حساب آنها ایجاد شد، اگر لغو شد و چه زمانی، وضعیت اشتراک، نام پلن
• اطلاعات سطح پشتیبانی: سطح پشتیبانی، آیا حساب آنها فعال است
• اطلاعات استقرار و نسخه متابیس: نوع استقرار، ارائه‌دهنده ابری، شماره نسخه متابیس و آخرین باری که به‌روزرسانی کردند
• جزئیات حساب: ارزش سالانه، LTV، تعداد کاربران، کشور
• جزئیات ابری: چند سوال و داشبورد مشتری دارد، و لینک به لاگ نمونه آنها
• اطلاعات تماس: ایمیل، نام، سطح دانش فنی
• خوشحالی یا احساس مشتری: پاسخ‌های نظرسنجی، پاسخ‌های CSAT و غیره
• لیست مسائل و تیکت‌های مرتبط GitHub

از نظر فنی، می‌توانید یک داشبورد متابیس را در هر برنامه‌ای که اجازه جاسازی iframe را می‌دهد یا اجازه برنامه‌های شخص ثالث که از استفاده از URL جاسازی پشتیبانی می‌کنند را می‌دهد جاسازی کنید. چند پلتفرم دیگر که می‌توانید این را با آنها تست کنید Salesforce، Jira، Stripe، و Shopify هستند.

در اینجا یک راهنمای سریع از نحوه جاسازی داشبورد مشتری خود در Zendesk آمده است.

راه‌اندازی ما: یک داشبورد تعاملی جاسازی شده در یک iframe با استفاده از یک برنامه شخص ثالث

۱. ما از جاسازی تعاملی در این مثال استفاده کردیم. شما می‌توانید از جاسازی عمومی برای جاسازی یک داشبورد استفاده کنید، اما برای این نمونه، ما نیاز به محافظت از داده مشتری داشتیم زیرا جاسازی عمومی لینک‌های عمومی را فعال می‌کند. اگر در موقعیت مشابهی هستید بهتر است با جاسازی تعاملی بمانید. ۲. ما تصمیم گرفتیم از یک برنامه iFrame به جای ساخت برنامه خود استفاده کنیم. با رفتن به یک برنامه شخص ثالث، منابع مهندسی را صرفه‌جویی کردیم و به یک پیاده‌سازی کار سریع‌تر رسیدیم. یک عیب: لوگوی برنامه‌ای که با آن رفتیم، Customer360، همیشه قابل مشاهده است. ایده‌آل نیست، اما واقعاً مشکلی برای استفاده داخلی ما نیست.

برنامه‌های iframe که در نظر گرفتیم

برای شروع، برنامه‌ها را محدود کردیم و لیستی از مزایا و معایب آنها ساختیم:

• Iframe Plus: ۷ دلار برای هر نمونه، بنابراین قیمت پایین است، اما عیب این است که هیچ پشتیبانی وجود ندارد.
• Zendesk Iframe: رایگان، اما گزینه نوار کناری تیکت وجود نداشت، که جایی است که می‌خواستیم داشبورد در آن زندگی کند. به عنوان مثال، داشبورد فقط در نمای سازمان ظاهر می‌شود، نه نمای تیکت.
• Customer360: ۴ دلار برای هر عامل، بنابراین قیمت پایین است و رابط کاربری آسان استفاده است. این برنامه‌ای است که با آن رفتیم.

فعال کردن جاسازی تعاملی

بعد، ما جاسازی تعاملی را با رفتن به Settings > Admin settings > Embedding فعال کردیم. روی Enable کلیک کنید، و روی Interactive embedding کلیک کنید.

سپس URL داشبورد خود را از متابیس گرفتیم و آن را به درستی فرمت کردیم تا در برنامه Customer360 استفاده کنیم.

شما باید ویژگی source را به URL سایت خود تنظیم کنید. به عنوان مثال، https://metabase.yourcompany.com/dashboard/1.

مجاز کردن URL‌های Zendesk و Customer 360 در متابیس

ما همچنین نیاز به مجاز کردن URL‌های Zendesk زیر در متابیس داشتیم. برای انجام این کار، به Admin Settings > Settings > Embedding > Interactive > Authorized Origins رفتیم و URL‌های زیر را اضافه کردیم:

URL‌های Zendesk

• https://*.zdusercontent.com
• https://*.zndsk.com
• https://*.zendesk.com

URL Customer 360

• https://*.myplaylist.io

نصب برنامه Customer 360 و افزودن URL داشبورد خود

بعد، ما برنامه Customer 360 را نصب کردیم و URL داشبورد خود را (با ویژگی source تنظیم شده به نمونه متابیس ما) وارد کردیم.

فقط داده مشتری که نیاز دارید را با انتقال پارامترها در URL به فیلترها در داشبورد خود نشان دهید

می‌توانید مقادیر را به فیلترهای داشبورد خود از طریق URL‌های پارامتری منتقل کنید. به عنوان مثال، ما هم اطلاعات سازمان و هم درخواست‌کننده تیکت را منتقل می‌کنیم، بنابراین اکنون داشبورد ما به طور خودکار فیلتر می‌شود تا فقط اطلاعاتی که در مورد مشتری و سازمان آنها نیاز داریم را نشان دهد.

برنامه Customer 360 به شما امکان استفاده از پارامترهای زیر را می‌دهد:

• {{ticket.requester.email}}
• {{ticket.requester.emails}} (لیست جدا شده با کاما از ایمیل‌های درخواست‌کننده)
• {{ticket.requester.external_id}}
• {{ticket.requester.id}}
• {{ticket.requester.custom_fields.<field_key>}}
• {{ticket.organization.id}}
• {{ticket.organization.external_id}}
• {{ticket.organization.custom_fields.<field_key>}}
• {{ticket.ticket_field_<field ID number>}}

مستندات تنظیم یک متغیر SQL را ببینید.

یک نکته کوچک در مورد SSO

متابیس از شما می‌خواهد دوباره وارد شوید اگر صفحه تیکت Zendesk را رفرش کنید یا یک تیکت جدید اضافه کنید. همچنین، شما نیاز به یک جلسه فعال در متابیس خود دارید تا هر بار که وارد نوار کناری تیکت می‌شوید اخراج نشوید. ما این را با تنظیم MB_SESSION_COOKIE_SAMESITE محیط خود به none حل کردیم، همانطور که در مستندات راه‌اندازی جاسازی تعاملی و مستندات متغیرهای محیط ذکر شده است.

تمیز کردن نمای داشبورد خود در Zendesk

حالا، وقتی روی یک تیکت در Zendesk کلیک می‌کنیم و نوار کناری تیکت ظاهر می‌شود، داشبورد مشتری ما ظاهر می‌شود و به مشتری و سازمان آنها فیلتر می‌شود!

ما چند جزء رابط کاربری متابیس، مانند هدرها یا breadcrumb‌ها را با تنظیم header به false در URL جاسازی پنهان کردیم. ما این کار را برای تمیز کردن نحوه ظاهر داشبورد خود در برنامه انجام دادیم.

لیستی از مثال‌هایی از کارهای دیگری که می‌توانید انجام دهید در مستندات نمایش یا پنهان کردن اجزای رابط کاربری متابیس وجود دارد. توجه داشته باشید که برخی از این ویژگی‌ها ممکن است برای داشبوردهای خاص کار نکنند زیرا به اجزای موجود در داشبورد بستگی دارد.

پروژه‌های جاسازی دیگر را بررسی کنید

اگر به الهام نیاز دارید، پروژه‌ها و بازخوردها را در ردیاب GitHub ما بررسی کنید. اگر در آینده به صورت دستی به مخزن وارد شوید، فقط با label:Embedding/Interactive فیلتر کنید تا لیست کاملی از مسائل مرتبط با جاسازی فعلی دریافت کنید (روی بسته شده کلیک کنید تا مسائل حل شده را ببینید.)

منابع بیشتر تحلیل‌های جاسازی شده

• تحلیل‌های جاسازی شده چیست
• استراتژی‌ها برای ارائه تحلیل‌های روبروی مشتری
• پنج مرحله غم جاسازی
• یک راز متابیس