Tiện ích trang web: cài đặt nâng cao

You are here:
Thời gian đọc 3 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, chúng tôi 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’, function(event)

{

var widget = event.detail.widget;

// 1. Setting external user authentication

// 2. Setting custom data

// 3. Event handling

});

</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’, function(event)

{

var widget = event.detail.widget;

// Settings external user authentication

widget.setUserRegisterData({

‘hash’: ’12b42ebcec7e3c26a313272c26efddbd’,

‘name’: ‘John’,

‘lastName’: ‘Smith’,

‘avatar’: ‘http://files.smith.com/images/avatar-john.jpg’,

’email’: ‘john@smith.com’,

‘www’: ‘https://bitrix24.com’,

‘gender’: ‘M’,

‘position’: ‘Loyal Customer’

});

});

</script>

*Lưu ý :

hash là 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’, function(event)

{

var widget = event.detail.widget;

// Setting custom data (get published at the beginning of a new conversation, extended format)

widget.setCustomData([

{“USER”: {

“NAME” : “John Smith”,

“AVATAR” : “http://files.smith.com/images/avatar-john.jpg”,

}},

{“GRID”: [

{

“NAME” : “E-mail”,

“VALUE” : “john@smith.com”,

“DISPLAY” : “LINE”,

},

{

“NAME” : “Customer ID”,

“VALUE” : “12234”,

“COLOR” : “#ff0000”,

“DISPLAY” : “LINE”

},

{

“NAME”: “Website”,

“VALUE”: location.hostname,

“DISPLAY”: “LINE”

},

{

“NAME”: “Page”,

“VALUE”: “[url=”+location.href+”]”+(document.title || location.href)+”[/url]”,

“DISPLAY”: “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’, function(event)

{

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’, function(event)

{

var widget = event.detail.widget;

// Event handling

widget.subscribe({

type: BX.LiveChatWidget.SubscriptionType.EVENT_SUBSCRIPTION_TYPE,

callback: function(data) {

// any command

}

});

});

</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ả:{operator: {name: ”,firstName: ”,lastName: ”,workPosition: ”,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,recipientId:”chat711773″,date:”2018-11-22T20:17:57.000Z”,text:”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ả:{form: “welcome”, fields: {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, text:”hi!”}
  • BX.LiveChatWidget.SubscriptionType.userVote – sự kiện “khách hàng đã đánh giá cuộc trò chuyện”.
    Ví dụ về kết quả:{vote: “like”} // like|dislike
  • 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 every hơi khác nhau:<script type=”text/javascript”> window.addEventListener(‘onBitrixLiveChat’, function(event)

{

var widget = event.detail.widget;

widget.subscribe({

type: BX.LiveChatWidget.SubscriptionType.every,

callback: function(event) {

if (event.type == BX.LiveChatWidget.SubscriptionType.configLoaded)

{

widget.open();

}

}

});

});
</script>

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

{type: “userVote”, data: {vote: “like”}}

type hiể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’, function(event)

{

var widget = event.detail.widget;

// Setting external user authentication

widget.setUserRegisterData({

‘hash’: ’12b42ebcec7e3c26a313272c26efddbd’,

‘name’: ‘John’,

‘lastName’: ‘Smith’,

‘avatar’: ‘http://files.smith.com/images/avatar-john.jpg’,

’email’: ‘john@smith.com’,

‘www’: ‘https://bitrix24.com’,

‘gender’: ‘M’,

‘position’: ‘Loyal Customer’

});

// Setting custom data (get published at the beginning of a new conversation, extended format)

widget.setCustomData([

{“USER”: {

“NAME” : “John Smith”,

“AVATAR” : “http://files.smith.com/images/avatar-john.jpg”,

}},

{“GRID”: [

{

“NAME” : “E-mail”,

“VALUE” : “john@smith.com”,

“DISPLAY” : “LINE”,

},

{

“NAME” : “Customer ID”,

“VALUE” : “12234”,

“COLOR” : “#ff0000”,

“DISPLAY” : “LINE”

},

{

“NAME”: “Website”,

“VALUE”: location.hostname,

“DISPLAY”: “LINE”

},

{

“NAME”: “Page”,

“VALUE”: “[url=”+location.href+”]”+(document.title || location.href)+”[/url]”,

“DISPLAY”: “LINE”

},

]}

]);

widget.subscribe({

type: BX.LiveChatWidget.SubscriptionType.every,

callback: function(event) {

if (event.type == BX.LiveChatWidget.SubscriptionType.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.

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

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

<script>

window.addEventListener(‘onBitrixLiveChat’, function(event)

{

var widget = event.detail.widget;

widget.subscribe({

type: BX.LiveChatWidget.SubscriptionType.configLoaded,

callback: function()

{

widget.addLocalize({VAR

Was this article helpful?
Dislike 0
Views: 96