Widget trang web: cài đặt nâng cao

You are here:
Thời gian đọc 4 phút

Nếu bạn đã có tiện ích trang web được kết nối với trang web của mình và bạn muốn xác định khách hàng trong Trò chuyện trực tiếp Bitrix24, bạn có thể sử dụng các giải pháp được liệt kê trong bài viết này.
Ví dụ: bạn có cửa hàng trực tuyến Bitrix24 và trang web Bitrix24. Khách hàng đã mua một cái gì đó trong cửa hàng trực tuyến của bạn và lần đầu tiên truy cập trang web của bạn.
Đối với những khách hàng chưa đăng nhập vào bất kỳ dịch vụ nào của bạn, bạn có thể sử dụng mẫu web CRM đặc biệt.
Đối với khách hàng đã đăng nhập vào bất kỳ dịch vụ nào của bạn, Bitrix24 có một giải pháp thú vị hơn và khách hàng của bạn sẽ không cần điền vào biểu mẫu liên hệ nữa.

Làm thế nào nó hoạt động

Bạn có thể thêm mã JavaScript đặc biệt vào trang tiện ích trang web của bạn được kết nối.
Nói chung, mã này trông như thế:

<script type = "text / javascript">
window.addEventListener ('onBitrixLiveChat', hàm (sự kiện)
{
	var widget = event.detail.widget;

	// 1. Đặt xác thực người dùng bên ngoài
	...
	
	// 2. Đặt dữ liệu tùy chỉnh
	...
	
	// 3. Xử lý sự kiện
	...
	
});
</ script>

Làm việc với các tiện ích trang web:

  • widget.open() – mở widget.
  • widget.close() – đóng widget.
  • widget.subscribe() – đăng ký sự kiện.
  • widget.setUserRegisterData() – thiết lập xác thực người dùng bên ngoài.
  • widget.setCustomData() – thiết lập dữ liệu tùy chỉnh.

1. Đặt xác thực người dùng bên ngoài

<script type = "text / javascript">
window.addEventListener ('onBitrixLiveChat', hàm (sự kiện)
{
	var widget = event.detail.widget;

	// Cài đặt xác thực người dùng bên ngoài
	widget.setUserRegisterData ({
		'băm': '12b42ebcec7e3c26a313272c26efddbd',
		'tên': 'John',
		'LastName': 'Smith',
		'avatar': 'http://files.smith.com/images/avatar-john.jpg',
		'email': 'john@smith.com',
		'www': 'https://bitrix24.com',
		'Giới tính m',
		'vị trí': 'Khách hàng trung thành'
	});
	
});
</ script>
Lưu ý :
hashlà trường đặc biệt “thay thế” xác thực. Mã này cần phải có định dạng MD5 và duy nhất trong Bitrix24 của bạn. Ví dụ:md5(USER_ID+_website_address_ + _secret_code_)

2. Cài đặt dữ liệu tùy chỉnh

Bạn có thể đặt dữ liệu tùy chỉnh bằng cách sử dụng các khối đặc biệt:

<script type = "text / javascript">
window.addEventListener ('onBitrixLiveChat', hàm (sự kiện)
{
	var widget = event.detail.widget;

	// Đặt dữ liệu tùy chỉnh (được xuất bản khi bắt đầu cuộc hội thoại mới, định dạng mở rộng)
	widget.setCustomData ([
		{"NGƯỜI DÙNG": {
			"TÊN": "John Smith",
			"AVATAR": "http://files.smith.com/images/avatar-john.jpg",
		}},
		{"GRID": [
			{
				"TÊN": "E-mail",
				"GIÁ TRỊ": "john@smith.com",
				"HIỂN THỊ": "LINE",
			},
			{
				"TÊN": "ID khách hàng",
				"GIÁ TRỊ": "12234",
				"MÀU SẮC": "# ff0000",
				"HIỂN THỊ": "LINE"
			},
			{
				"TÊN": "Trang web",
				"GIÁ TRỊ": location.hostname,
				"HIỂN THỊ": "LINE"
			},
			{
				"TÊN": "Trang",
				"GIÁ TRỊ": "[url =" + location.href + "]" + (document.title || location.href) + "[/ url]",
				"HIỂN THỊ": "LINE"
			},
		]}
	]);
	
});
</ script>

Để xuất bản dữ liệu ở định dạng văn bản, bạn có thể sử dụng cấu trúc đơn giản hóa. Trong văn bản, bạn có thể sử dụng các thẻ HTML: BRBUISURL.

<script type = "text / javascript">
window.addEventListener ('onBitrixLiveChat', hàm (sự kiện)
{
	var widget = event.detail.widget;

	widget.setCustomData ("[b] John Smith [/ b] (john@smith.com)");

});
</ script>

3. Xử lý sự kiện

<script type = "text / javascript">
window.addEventListener ('onBitrixLiveChat', hàm (sự kiện)
{
	var widget = event.detail.widget;

	// Xử lý sự kiện	
	widget.subscribe ({
		loại: BX.LiveChatWidget.SubcripType.EVENT_SUBSCRIPTION_TYPE,
		gọi lại: hàm (dữ liệu) {
		// bất kỳ lệnh nào
		...
		}
	});
	
});
</ script>
  • BX.LiveChatWidget.SubscriptionType.configLoaded – Sự kiện “thông tin về kênh mở đã được tải”.
  • BX.LiveChatWidget.SubscriptionType.widgetOpen – Sự kiện “đã được mở”.
  • BX.LiveChatWidget.SubscriptionType.widgetClose – sự kiện “widget đã bị đóng”.
  • BX.LiveChatWidget.SubscriptionType.sessionStart– sự kiện “cuộc trò chuyện đã được bắt đầu”.
    Ví dụ về kết quả:

    {sessionId: 123}
  • BX.LiveChatWidget.SubscriptionType.sessionOperatorChange– sự kiện “đại lý đã được thay đổi”.
    Ví dụ về kết quả:

    {toán tử: {name: '', FirstName: '', lastName: '', workPocation: '', avatar: '', online: false}}
  • BX.LiveChatWidget.SubscriptionType.sessionFinish– sự kiện “đã kết thúc”.
    Ví dụ về kết quả:

    {sessionId: 123}
  • BX.LiveChatWidget.SubscriptionType.operatorMessage– sự kiện “đại lý đã gửi tin nhắn”.
    Ví dụ về kết quả:

    {id: "44609041", chatId: 711773, senderId: 1246, receiveId: "chat711773", ngày: "2018-11-22T20: 17: 57.000Z", văn bản: "hi!"}
  • BX.LiveChatWidget.SubscriptionType.userForm– sự kiện “khách hàng đã điền vào mẫu web”.
    Ví dụ về kết quả:

    {mẫu: "welcome", các trường: {name: "", phone: "", email: ""}} // welcome | offline | history
  • BX.LiveChatWidget.SubscriptionType.userMessage– sự kiện “khách hàng đã gửi tin nhắn”.
    Ví dụ về kết quả:

    {id: 123, văn bản: "xin chào!"}
  • BX.LiveChatWidget.SubscriptionType.userVote– sự kiện “khách hàng đã đánh giá cuộc trò chuyện”.
    Ví dụ về kết quả:

    {phiếu bầu: "thích"} // thích | không thích
  • BX.LiveChatWidget.SubscriptionType.every– kết quả của tất cả các sự kiện có thể được chỉ định cùng một lúc trong sự kiện này.
    Loại sự kiện everyhơi khác nhau:

    <script type = "text / javascript">
    window.addEventListener ('onBitrixLiveChat', hàm (sự kiện)
    {
    	var widget = event.detail.widget;
    
    	widget.subscribe ({
    		loại: BX.LiveChatWidget.SubcripType.every,
    		gọi lại: hàm (sự kiện) {
    			if (event.type == BX.LiveChatWidget.SubcripType.configLoaded)
    			{
    				widget.open ();
    			}
    		}
    	});
    	
    });
    </ script>

    Ví dụ về kết quả:

    {loại: "userVote", dữ liệu: {vote: "like"}}

    typehiển thị cho bạn loại sự kiện, data– dữ liệu sự kiện (ví dụ về các dữ liệu này được đưa ra ở trên).

Mã JavaScript cuối cùng của bạn có thể bao gồm 3 phần, tùy thuộc vào nhu cầu của bạn.
Ví dụ:

<script type = "text / javascript">
window.addEventListener ('onBitrixLiveChat', hàm (sự kiện)
{
	var widget = event.detail.widget;
	
	// Đặt xác thực người dùng bên ngoài
	widget.setUserRegisterData ({
		'băm': '12b42ebcec7e3c26a313272c26efddbd',
		'tên': 'John',
		'LastName': 'Smith',
		'avatar': 'http://files.smith.com/images/avatar-john.jpg',
		'email': 'john@smith.com',
		'www': 'https://bitrix24.com',
		'Giới tính m',
		'vị trí': 'Khách hàng trung thành'
	});	

	// Đặt dữ liệu tùy chỉnh (được xuất bản khi bắt đầu cuộc hội thoại mới, định dạng mở rộng)
	widget.setCustomData ([
		{"NGƯỜI DÙNG": {
			"TÊN": "John Smith",
			"AVATAR": "http://files.smith.com/images/avatar-john.jpg",
		}},
		{"GRID": [
			{
				"TÊN": "E-mail",
				"GIÁ TRỊ": "john@smith.com",
				"HIỂN THỊ": "LINE",
			},
			{
				"TÊN": "ID khách hàng",
				"GIÁ TRỊ": "12234",
				"MÀU SẮC": "# ff0000",
				"HIỂN THỊ": "LINE"
			},
			{
				"TÊN": "Trang web",
				"GIÁ TRỊ": location.hostname,
				"HIỂN THỊ": "LINE"
			},
			{
				"TÊN": "Trang",
				"GIÁ TRỊ": "[url =" + location.href + "]" + (document.title || location.href) + "[/ url]",
				"HIỂN THỊ": "LINE"
			},
		]}
	]);
		
	widget.subscribe ({
		loại: BX.LiveChatWidget.SubcripType.every,
		gọi lại: hàm (sự kiện) {
			if (event.type == BX.LiveChatWidget.SubcripType.configLoaded)
			{
				widget.open ();
			}
		}
	});	
	
});
</ script>

4. Tùy chỉnh các cụm từ được sử dụng trong tiện ích trang web

Bạn có thể tùy chỉnh các cụm từ được sử dụng trong Tiện ích trang web Bitrix24.

Widget trang web: cài đặt nâng cao
Widget trang web: cài đặt nâng cao

Sử dụng mã JavaScript để làm điều đó:

<tập lệnh>
window.addEventListener ('onBitrixLiveChat', hàm (sự kiện)
{
	var widget = event.detail.widget;

	widget.subscribe ({
		loại: BX.LiveChatWidget.SubcripType.configLoaded,
		chức năng gọi lại() 
		{
			widget.addLocalize ({VARIABLE: 'Văn bản mới'});				
		}
	});
	
});
</ script>
Was this article helpful?
Dislike 0
Views: 242