http://ruraqmaki.org/js/inbox-chat-loader.js

1function manageChatStateBasedOnCurrentSettings(
2  currentData,
3  previousSettings,
4  currentSettings,
5) {
6  Object.keys(currentSettings).forEach(key => {
7    if (previousSettings[key] !== currentSettings[key]) {
8      settingChanged(key, currentSettings[key], currentData);
9    }
10  });
11}
12
13function settingChanged(key, value, currentData) {
14  switch (key) {
15    case 'icon':
16    case 'text':
17      localStorage.setItem(
18        'shopifyChatData',
19        JSON.stringify({...currentData, isOpen: false}),
20      );
21      break;
22    case 'greetingMessage':
23      localStorage.setItem(
24        'shopifyChatData',
25        JSON.stringify({
26          ...currentData,
27          conversationId: null,
28          sessionId: null,
29          hasSentCustomerInfo: false,
30          isOpen: true,
31        }),
32      );
33      break;
34  }
35}
36
37(function load() {
38  const chatButton = document.getElementById('chat-button-container');
39  const chatSettings = chatButton.dataset;
40  const buttonHorizontalPosition = chatButton.getAttribute(
41    'data-horizontal-position',
42  );
43  const buttonVerticalPosition = chatButton.getAttribute(
44    'data-vertical-position',
45  );
46  const buttonIcon = chatButton.getAttribute('data-icon');
47  const buttonText = chatButton.getAttribute('data-text');
48  const buttonColor = chatButton.getAttribute('data-color');
49  const buttonSecondaryColor = chatButton.getAttribute('data-secondary-color');
50  const buttonTernaryColor = chatButton.getAttribute('data-ternary-color');
51  const shopDomain = chatButton.getAttribute('data-domain');
52  const externalIdentifier = chatButton.getAttribute(
53    'data-external-identifier',
54  );
55  const customerId = chatButton.getAttribute('data-customer-id');
56  const customerEmail = chatButton.getAttribute('data-customer-email');
57  const customerFirstName = chatButton.getAttribute('data-customer-first-name');
58  const customerLastName = chatButton.getAttribute('data-customer-last-name');
59  const customerAcceptsMarketing = chatButton.getAttribute(
60    'data-customer-accepts-marketing',
61  );
62  const customerLogoutUrl = chatButton.getAttribute('data-customer-logout-url');
63
64  if (Shopify.designMode) {
65    const chatPreviewJSON =
66      sessionStorage.getItem('chatPreview') || JSON.stringify({});
67    const previousSettings = JSON.parse(chatPreviewJSON);
68    sessionStorage.setItem('chatPreview', JSON.stringify(chatSettings));
69
70    const currentData =
71      JSON.parse(localStorage.getItem('shopifyChatData')) || {};
72    manageChatStateBasedOnCurrentSettings(
73      currentData,
74      previousSettings,
75      chatSettings,
76    );
77  }
78
79  const src = document.currentScript.src;
80  const script = document.createElement('script');
81
82  const chatSrc = 'shopifyChatV1Widget.js';
83  const indexSrc = src.replace('inbox-chat-loader.js', chatSrc);
84
85  script.src = indexSrc;
86  script.type = 'module';
87  script.defer = true;
88  script.async = true;
89  Object.assign(script.dataset, {
90    buttonColor: buttonColor,
91    secondaryColor: buttonSecondaryColor,
92    ternaryColor: buttonTernaryColor,
93    icon: buttonIcon,
94    text: buttonText,
95    position: buttonHorizontalPosition,
96    verticalPosition: buttonVerticalPosition,
97    shopId: externalIdentifier,
98    shop: shopDomain,
99    shopDomain: shopDomain,
100    ...(customerId && {customerId}),
101    ...(customerEmail && {customerEmail}),
102    ...(customerFirstName && {customerFirstName}),
103    ...(customerLastName && {customerLastName}),
104    ...(customerAcceptsMarketing && {customerAcceptsMarketing}),
105    ...(customerLogoutUrl && {customerLogoutUrl}),
106  });
107
108  chatButton.parentNode.appendChild(script);
109})();