Advanced chat customization

Updated 3 days ago by Amy Elenius

If you would like to further customize the chat widget, you can follow the instructions below. However, you may first want to check out this guide on how to set up some basic chat customization.

This article is meant to serve simply as a reference point for you and your team and following these instructions will require knowledge of HTML, JavaScript, and possibly Shopify Liquid.

If you're using BigCommerce, please keep in mind that BC has a 'Manage Code' feature that allows you to place only <script> codes. This means that you will be able to place the default chat code and only a few other customization codes there.
For any non-script codes, like the one for moving the widget up/down or left/right, you have to go into their 'Theme Manager → Edit Theme' and find the home.html file.

Disclaimer the suggestions below are not formally features of our chat widget, but suggestions on how to further customize it. We recommend for these steps to be performed by someone with a technical background as you're experimenting with the chat set-up.

Remove 'Powered by Gorgias' branding

You can remove the 'Powered by Gorgias' branding in the chat widget by adding this script to your webpage, before the script of the Gorgias chat:

<script>var HIDE_POWERED_BY_GORGIAS = true;</script>

This will remove the branding both on the Chats and the Chat Campaigns.

Instructions for Shopify:

  1. Go to your Shopify store's theme.liquid to edit the code.
    1. Navigate to your Shopify's home screen.
    2. Click on Online Store on the left.
    3. Select Themes → Actions → Edit code.
    4. Under Layout, choose theme.liquid.
  2. Add the code:
    1. Copy the code above.
    2. Paste it on the first line or last line in the text code box.
  3. Click Save. The branding shouldn't appear on the chat widget moving forward.

Moving the chat to the left side

The chat widget shows up on the bottom-right side of the window by default. To move the chat to the left side of the web page, insert the following HTML code into the head section of your website:

<style>
#gorgias-chat-container iframe#chat-button { left: 22px }
#gorgias-chat-container iframe#chat-window { left: 0 }
#gorgias-chat-container iframe#chat-campaigns { left: 0 }
</style>

Instructions for Shopify:

  1. Go to your Shopify store's theme.liquid to edit the code.
    1. Navigate to your Shopify's home screen.
    2. Click on Online Store on the left.
    3. Select ThemesActionsEdit code.
    4. Under Layout, choose theme.liquid.
  2. Add the code:
    1. Copy the code above.
    2. Paste it on the first line or the last line in the text code box.
  3. Click Save. Your chat should now be on the left side of the page.

Changing the position of the chat widget

On Desktop

You can move the chat widget up on the page. If you want to do so, paste the HTML code below to move the chat widget up 50px (50 pixels). This will only be applied on desktop, and not on mobile so that you do not see issues with the chat window being printed outside phone screens.

<style>
@media (min-width: 768px) {
#gorgias-chat-container iframe {
margin-bottom: 50px !important
}
}
</style>

On Mobile

To move the chat widget up 50px (50 pixels) on mobile devices, please implement the following code:

<style>
@media (max-width: 768px) {
#gorgias-chat-container iframe#chat-button,
#gorgias-chat-container iframe#chat-campaigns {
margin-bottom: 50px !important
}
}
</style>

Instructions for Shopify:

  1. Go to your Shopify store's theme.liquid to edit the code.
    1. Navigate to your Shopify's home screen.
    2. Click on Online Store on the left.
    3. Select ThemesActionsEdit code.
    4. Under Layout, choose theme.liquid.
  2. Add the code:
    1. Copy any of the code above (depending on what you want to do).
    2. Paste it on the first line or the last line in the text code box.
  3. Click Save. Your chat widget should appear higher by 50px depending on the device you've chosen.

Hiding the chat on mobile

To hide the chat on mobile, add this code to your site: 

<style>@media (max-width: 768px) {#gorgias-chat-container {display: none}}</style>

Instructions for Shopify:

  1. Go to your Shopify store's theme.liquid to edit the code.
    1. Navigate to your Shopify home screen.
    2. Click on Online Store on the left.
    3. Select ThemesActionsEdit Code.
    4. Under Layout, choose theme.liquid.
  2. Add the code:
    1. Copy the code above.
    2. Paste it on the first line or the last line in the text code box.
  3. Click Save. The chat widget should now be hidden when using mobile.

The chat is conflicting with other widgets

If your chat widget is conflicting or hidden behind some other element on the page, like the accessibility widget, rewards widget, etc., changing the z-index should overlay the chat on top of any other element. To do this, add this code to your site:

<style>
#gorgias-chat-container iframe#chat-window,
#gorgias-chat-container iframe#chat-campaigns {
z-index: 2147483647 !important;
}
#gorgias-chat-container iframe#chat-button {
z-index: 2147483646 !important;
}
</style>

If you are using Shopify, the code needs to be added under theme.liquid files. It would be best if you add it somewhere close to the existent chat code, just for easier organization.

Instructions for Shopify:

  1. Go to your Shopify store's theme.liquid to edit the code.
    1. Navigate to your Shopify home screen.
    2. Click on Online Store on the left.
    3. Select ThemesActionsEdit Code.
    4. Under Layout, choose theme.liquid.
  2. Add the code:
    1. Copy the code above.
    2. Paste it on the first line or the last line in the text code box.
  3. Click Save. The chat widget should not be hidden now.

Subscribe to chat events

Sometimes it's useful to do something when the chat widget is open or closed. You can use the example below to do that. Notice that the code below uses window.setInterval - that is because the chat JavaScript code is loaded asynchronously and we don't know if it's loaded or not so we have to check periodically:

<script>
var gorgiasChatInterval = window.setInterval(function() {
if (window.GorgiasChat && GorgiasChat.hasOwnProperty("on")) {
window.clearInterval(gorgiasChatInterval); // this line breaks out of the loop - make sure it's not deleted.
// the list of supported events is detailed below
GorgiasChat.on('EVENT_NAME', function(data) {
// your code should go here
});
}
}, 100);
</script>

Gorgias Chat supports the following events:

  • A ready event is triggered when the chat is rendered.
  • A destroy event is triggered when the chat is unmounted.
  • A message:received event is triggered when a message is received. The data parameter will contain the message attributes.
  • A message:sent event is triggered when a message is received. The data parameter will contain the message attributes.
  • A message event is triggered when a message is sent or received. The data parameter will contain the message attributes.
  • An unreadCount event is triggered when the unread message count changes. The data parameter will contain the new number of unread messages.
  • A widget:opened event is triggered when the chat window is opened.
  • A widget:closed event is triggered when the chat window is closed.
  • A connected event is triggered when a connection to the chat server is established.
  • A disconnected event is triggered when a connection to the chat server is lost.
  • A typing:start event is triggered when an agent begins typing their message.
  • A typing:stop event is triggered when an agent stops typing their message.

It is also possible to deregister an event listener using the GorgiasChat.off('EVENT_NAME', listener). The listener argument must be the function that was previously registered to subscribe to the event.

If you want to add a link on your page to open the chat when clicked, use the code below:

<a onclick="GorgiasChat.open();">Start a chat with our team</a>

Likewise, you can also have a link to close the chat:

<a onclick="GorgiasChat.close();">Close the chat</a>

Instructions for Shopify:

  1. Go to your Shopify store's theme.liquid to edit the code.
    1. Navigate to your Shopify home screen.
    2. Click on Online Store on the left.
    3. Select Pages → The page where you want to add the link (Ex. Contact Us page).
  2. Add the code:
    1. Copy the code above (choose the code depending on what you want to do).
    2. In the text box under Content, click on the <> icon (it says "Show HTML" on hover). This will switch your view from text only to HTML view.
    3. Paste the code.
  3. Edit the text (optional):
    1. Go back to the original view by clicking on the <> icon again.
    2. By default, it will say, "Start a chat with our team!", but you may customize this text if you want to.
  4. Click Save.

Check if the chat is open or closed

You may use the following method to determine whether the chat is in an open or closed state:

GorgiasChat.isOpen() // will return true or false

Add custom CSS

If you wish to customize the visual aspect of the chat widget, you can add additional CSS rules to each of the three following sections: the chat button, the chat window, and the chat campaigns.

Add the following script to your web page and modify the three lines style.textContent = '...', replacing the content with your own CSS rules:

<script>
var maxRepetitions = 60
var repetitionCount = 0
var isWindowStyleAppended = false
var gorgiasChatInterval = window.setInterval(function() {
var container = document.querySelector('#gorgias-chat-container');
var chatButtonHead = container?.querySelector('#chat-button')?.contentWindow.document.querySelector('head');
var chatCampaignsHead = container?.querySelector('#chat-campaigns')?.contentWindow.document.querySelector('head');

if (chatButtonHead?.children.length && !isWindowStyleAppended) {
var buttonStyle = document.createElement('style');
buttonStyle.textContent = '.whatyouwanttochange {property: value}'; // the custom CSS for the chat button
chatButtonHead.appendChild(buttonStyle);
isWindowStyleAppended = true;
}

if (chatCampaignsHead?.children.length) {
window.clearInterval(gorgiasChatInterval); // this line breaks out of the loop - make sure it's not deleted.

var campaignStyles = document.createElement('style');
campaignStyles.textContent = '.whatyouwanttochange {property: value}'; // the custom CSS for the chat campaigns
chatCampaignsHead.appendChild(campaignStyles);
}

if (++repetitionCount == maxRepetitions) {
window.clearInterval(gorgiasChatInterval);
}
}, 100);
</script>

Remove the chat based on country code

This feature requires an ipstack account. Free accounts are limited to 5,000 requests. If you exceed this limit, you will need to upgrade to a paid account.

If you only work with certain countries you might want to only treat chat messages from certain countries. The code below hides the chat for ALL countries except United States (US) and Mexico (MX)

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
// set your ipstack API key
var ipstackAPIKey = 'YOUR_API_KEY'
// set your country code whitelist
var countryCodeWhiteList = ['US', 'MX']
// set this to false if you only have a free tier account for ipstack
var useHttps = true

function removeGorgiasChat(countryCode) {
var gorgiasRemoveChatInterval = window.setInterval(function () {
var container = document.querySelector('#gorgias-chat-container');
if (container && !countryCodeWhiteList.includes(countryCode)) {
window.clearInterval(gorgiasRemoveChatInterval); // this line breaks out of the loop - make sure it's not deleted.
container.remove()
}
}, 50);
}

var countryCode = window.localStorage.getItem('countryCode')
if (!countryCode) {
protocol = useHttps ? 'https' : 'http'
$.ajax({
url: protocol + '://api.ipstack.com/check?access_key=' + ipstackAPIKey + '&fields=country_code',
dataType: 'jsonp',
success: function (json) {
if (json && json.country_code) {
countryCode = json.country_code
} else {
countryCode = 'unknown'
}
window.localStorage.setItem('countryCode', countryCode)
removeGorgiasChat(countryCode)
},
error: function (request, status, error) {
console.error(request.responseText);
window.localStorage.setItem('countryCode', 'unknown')
removeGorgiasChat('unknown')
}
})
} else {
removeGorgiasChat(countryCode)
}
</script>

Instructions for Shopify:

  1. Go to your Shopify store's theme.liquid to edit the code.
    1. Navigate to your Shopify home screen.
    2. Click on Online Store on the left.
    3. Select ThemesActionsEdit code.
    4. Under Layout, choose theme.liquid.
  2. Add the code:
    1. Copy the code above and paste it on the code text box.
    2. Enter your ipstack API key where the code says 'YOUR_API_KEY'.
    3. Enter the country code/s where you only want to see the chat where it says, ['US', 'MX'].
    4. In the part where it says var useHttps = true, change it from true to false if you're using a free account on ipstack. Otherwise, just leave it be.
  3. Click on Save. The chat won't be available to anyone except for users in the countries you entered.

Disable the Self-service Portal

If you have the Self-service features enabled, but you wish to hide the Self-service Portal on certain pages, it is possible to add the following script to disable the Self-service Portal:

gorgiasChat.init().then(async (gorgiasChat) => {
gorgiasChat.disableSSP()
})

Check whether the current time is in business hours

You may use the following method to determine whether the Chat business hours (as defined in the Helpdesk) - please note that this variable is only trustworthy after the Chat initialization:

GorgiasChat.isBusinessHours() // will return true or false

Remove the chat outside business hours

Add the following code to your website right before our widget installation script in order to hide the chat outside business hours.

<script>var HIDE_WIDGET_OUTSIDE_BUSINESS_HOURS = true;</script>

Instructions for Shopify:

  1. Go to your Shopify store's theme.liquid to edit the code:
    1. Navigate to your Shopify home screen.
    2. Click on Online Store on the left.
    3. Select ThemesActionsEdit code.
    4. Under Layout, choose theme.liquid.
  2. Add the code:
    1. Copy the code above.
    2. Paste it on the first line or last line of the text code box.
  3. Click Save. The chat should no longer appear when outside business hours.

Adjust chat default text values

It is possible to adjust the hardcoded text values used by the chat. Simply update the values below in the dictionary containing the texts and insert the script in your HTML.

You can change the following hardcoded text values on the chat widget using the code below:

  • Online and offline introduction text
  • Message input placeholder
  • Email capture placeholder
  • Email capture input label
  • Email capture online trigger text
  • Email capture online thanks text
  • Email capture offline trigger text
  • Email capture offline thanks text
  • Email capture required email placeholder
  • Email capture required message placeholder
<script>
var chatDict = {
actionPostbackError:
'An error occurred while processing your action. Please try again.',
backLabelBackInAMinute: 'Back in 1 minute',
backLabelBackInAnHour: 'Back in 1 hour',
backLabelBackInDays: 'Back in {value} days',
backLabelBackInHours: 'Back in {value} hours',
backLabelBackInMinutes: 'Back in {value} minutes',
backLabelBackTomorrow: 'Back tomorrow',
campaignClickToReply: 'Click to reply',
clickToRetry: 'Message not delivered. Click to retry.',
conversationTimestampHeaderFormat: 'MMMM D',
emailCaptureInputLabel: 'Get notified by email',
emailCaptureOfflineThanksText:
"Thanks {email}! We'll get back to you shortly.",
emailCaptureOfflineTriggerText:
"We're away, leave us your email and we'll respond shortly.",
emailCaptureOnlineThanksText:
"Thanks! We'll email you at {email} if you leave.",
emailCaptureOnlineTriggerText:
'Leave us your email and we will reply soon.',
emailCapturePlaceholder: 'your@email.com',
emailCaptureRequiredEmailPlaceholder: 'Leave your email',
emailCaptureRequiredMessagePlaceholder: 'Write your message',
fetchHistory: 'Load more',
fetchingHistory: 'Retrieving history...',
headerText: 'Gorgias Team',
inputPlaceholder: 'Type a message...',
introductionText: 'How can we help?',
invalidFileError:
'Only images are supported. Choose a file with a supported extension (jpg, jpeg, png, gif, or bmp).',
messageDelivered: 'Delivered',
messageError:
'An error occurred while sending your message. Please try again.',
messageIndicatorTitlePlural: '({count}) New messages',
messageIndicatorTitleSingular: '({count}) New message',
messageRelativeTimeDay: '{value}d ago',
messageRelativeTimeHour: '{value}h ago',
messageRelativeTimeJustNow: 'Just now',
messageRelativeTimeMinute: '{value}m ago',
messageSending: 'Sending...',
messageTimestampFormat: 'h:mm A',
offlineIntroductionText: "We'll be back tomorrow",
poweredByGorgias: 'Powered by Gorgias',
send: 'Send',
tapToRetry: 'Message not delivered. Tap to retry.',
unsupportedActionType: 'Unsupported action type.',
unsupportedMessageType: 'Unsupported message type.',
}

var gorgiasChatInterval = window.setInterval(function() {
if (window.GorgiasChat && GorgiasChat.hasOwnProperty("updateTexts")) {
window.clearInterval(gorgiasChatInterval); // this line breaks out of the loop - make sure it's not deleted.

window.GORGIAS_CHAT_TEXTS = chatDict
GorgiasChat.updateTexts(chatDict)
}
}, 100);
</script>

If you have enabled the Self-service feature on the chat, you can use the following script, that allows adjusting both the Chat and Self-service wordings:

  <script>
var chatDict = {
actionPostbackError:
'An error occurred while processing your action. Please try again.',
backLabelBackInAMinute: 'Back in 1 minute',
backLabelBackInAnHour: 'Back in 1 hour',
backLabelBackInDays: 'Back in {value} days',
backLabelBackInHours: 'Back in {value} hours',
backLabelBackInMinutes: 'Back in {value} minutes',
backLabelBackTomorrow: 'Back tomorrow',
campaignClickToReply: 'Click to reply',
clickToRetry: 'Message not delivered. Click to retry.',
conversationTimestampHeaderFormat: 'MMMM D',
emailCaptureInputLabel: 'Get notified by email',
emailCaptureOfflineThanksText:
"Thanks {email}! We'll get back to you shortly.",
emailCaptureOfflineTriggerText:
"We're away, leave us your email and we'll respond shortly.",
emailCaptureOnlineThanksText:
"Thanks! We'll email you at {email} if you leave.",
emailCaptureOnlineTriggerText:
'Leave us your email and we will reply soon.',
emailCapturePlaceholder: 'your@email.com',
emailCaptureRequiredEmailPlaceholder: 'Leave your email',
emailCaptureRequiredMessagePlaceholder: 'Write your message',
fetchHistory: 'Load more',
fetchingHistory: 'Retrieving history...',
headerText: 'Gorgias Team',
inputPlaceholder: 'Type a message...',
introductionText: 'How can we help?',
invalidFileError:
'Only images are supported. Choose a file with a supported extension (jpg, jpeg, png, gif, or bmp).',
messageDelivered: 'Delivered',
messageError:
'An error occurred while sending your message. Please try again.',
messageIndicatorTitlePlural: '({count}) New messages',
messageIndicatorTitleSingular: '({count}) New message',
messageRelativeTimeDay: '{value}d ago',
messageRelativeTimeHour: '{value}h ago',
messageRelativeTimeJustNow: 'Just now',
messageRelativeTimeMinute: '{value}m ago',
messageSending: 'Sending...',
messageTimestampFormat: 'h:mm A',
offlineIntroductionText: "We'll be back tomorrow",
poweredByGorgias: 'Powered by Gorgias',
send: 'Send',
tapToRetry: 'Message not delivered. Tap to retry.',
unsupportedActionType: 'Unsupported action type.',
unsupportedMessageType: 'Unsupported message type.',
}

var sspDict = {
applyPromoCode: 'Apply promo code',
april: 'Apr',
attemptedDelivery: 'Attempted delivery',
august: 'Aug',
cancel: 'Cancel',
cancelFulfillment: 'Cancel fulfillment',
cancelMessageDescription: "I'd like to cancel the following fulfillment",
cancelOrder: 'Cancel an order',
canceled: 'Canceled',
cancelled: 'Cancelled',
cantSignIn: "Can't sign in?",
changeShippingAddress: "I'd like to change my shipping address",
checkSpamFolder:
"If you can't find the verification email, please check your spam and junk folders.",
codeExpiresIn: 'Code expires in',
codeSentTo: 'Code sent to',
codeWillExpire:
"This code will expire in 10 minutes. If you didn't initiate this request, please let our support agents know.",
confirmed: 'Confirmed',
createdAt: 'Created at',
customerHasNoOrdersEmail: 'No orders found for this email',
customerHasNoOrdersPhone: 'No orders found for this phone number',
damagedInDelivery: 'My order was damaged in delivery',
december: 'Dec',
delivered: 'Delivered',
deliveredVia: 'Shipped via',
editOrder: 'Edit order',
email: 'Email',
errorFetchingOrders: 'An error occurred while fetching your orders',
failedDelivery: 'Failed delivery',
failedFulfillment: 'Failed fulfillment',
failure: 'Failure',
february: 'Feb',
findOrder: 'Find your order',
fulfillment: 'Fulfillment',
fulfillmentDetails: 'Fulfillment details',
hiFirstname: 'Hi {{firstName}},',
howCanIHelp: 'How can we help?',
iHaveTheFollowingIssue: 'I have the following Issue:',
iWouldLikeToCancelTheFollowingOrder:
"I'd like to cancel the following order",
iWouldLikeToReturnTheFollowingItems:
"I'd like to return the following items",
inTransit: 'In transit',
inTransitVia: 'In-transit via',
incorrectOrder: 'I did not receive the correct order',
invalidCode: 'Invalid code',
invalidPhoneNumber: 'Invalid phone number',
itemNames: 'Item names',
itemsRequestedForReturn: 'Items requested for return',
january: 'Jan',
july: 'Jul',
june: 'June',
labelPrinted: 'Label printed',
labelPurchased: 'Label purchased',
lastUpdated: 'Last updated',
lostOrderDetails: 'Lost your order details? Talk to an agent',
march: 'Mar',
maxVerificationAttemptsReached: 'Maximum verification attempts reached',
may: 'May',
needHelp: 'Need more help?',
noCustomerAssociatedEmail: 'No customer associated with this email',
noCustomerAssociatedPhone: 'No customer associated with this phone number',
november: 'Nov',
october: 'Oct',
oneItemSelected: '1 item selected',
order: 'Order',
orderCreated: 'Order Created',
orderNotFound:
'We have no record of that order number and email combination. Please try again or ',
orderNumber: 'Order number',
orderPlaced: 'Order placed',
other: 'Other',
outForDelivery: 'Out for delivery',
outForDeliveryVia: 'Out for delivery via',
partiallyRefunded: 'Partially refunded',
pastDeliveryDate: "I'm past my expected delivery date",
pendingDelivery: 'Pending delivery',
pleaseRefreshPageToUseChat:
'Please refresh your page to continue using the chat.',
pleaseUseVerificationCodeToLogIn:
'Please use this verification code to complete your log-in:',
processing: 'Processing',
processingFulfillment: 'Processing fulfillment',
provideEmailAndOrderNumber: 'You must provide an email and an order number',
readyForPickup: 'Ready for pickup',
reasonCancelOrder: "I'd like to cancel my order",
reasonCancelSubscription: "I'd like to cancel my subscription",
reasonChangeDeliveryDate: "I'd like to change the delivery date",
reasonChangeShippingAddress: "I'd like to change my shipping address",
reasonDidNotReceiveRefund: "I didn't get my refund",
reasonDiscountNotWorking: 'My discount code is not working',
reasonEditOrder: "I'd like to edit my order",
reasonEditSubscription: "I'd like to edit my subscription",
reasonExchangeRequest: "I'd like to exchange items in my order",
reasonForgotToUseDiscount: 'I forgot to apply my discount code',
reasonIncorrectItems: 'The items are different from what I ordered',
reasonItemsMissing: 'Some items are missing from my order',
reasonNotHappy: "I'm not happy with the product I received :-1:",
reasonOrderDamaged: 'My order was damaged in delivery',
reasonOrderDefective: 'The items in my order are deffective',
reasonOrderStillNotShipped: 'My order should have shipped by now',
reasonOrderStuckInTransit: 'My order has been stuck in transit',
reasonOther: 'Other',
reasonPastExpectedDeliveryDate: "I'm past my expected delivery date",
reasonReorderItems: "I'd like to reorder some items",
reasonReplaceItemsRequest: "I'd like to replace items in my order",
reasonRequestDiscount: "I'd like a discount code",
reasonRequestRefund: "I'd like to get a refund for this order",
reasonReturnProduct: "I'd like to return a product",
reasonVeryHappy: "I'm very happy with the product I received :+1:",
reasonWhereIsMyOrder: 'Where is my order?',
refunded: 'Refunded',
reportAnIssueWithOrder: 'Report an issue with an order',
reportIssue: 'Report issue',
requestCancellation: 'Request Cancellation',
requestReturn: 'Request Return',
resendCode: 'Resend code',
return: 'Return',
returnItems: 'Return items',
returnOrder: 'Return an order',
see1MoreItem: '1 more item',
see1MoreOrder: 'See 1 more order',
seeMoreItems: '{moreItemsCount} more items',
seeMoreOrders: 'See {nextPageOrderCount} more orders',
seeOrders: 'See your orders',
selectAll: 'Select all',
sendCode: 'Send code',
sent: 'Sent',
september: 'Sept',
severalItemsSelected: '{itemsSelectedCount} items selected',
shipmentBeingDelivered:
'Order shipment is being delivered to its final destination.',
shippingAddress: 'Shipping address',
showLessItems: 'Show less',
signIn: 'Sign in',
sincerely: 'Sincerely,',
sms: 'SMS',
startConversation: 'Start conversation',
stuckInTransit: 'My order has been stuck in transit for several days',
supportTeam: 'The {{shopFriendlyName}} support team',
talkToLiveAgent: 'talk to a live agent',
thanksOurTeamWillRespond: 'Thanks, our team will respond shortly.',
total: 'Total',
track: 'Track',
trackOrder: 'Track an order',
trackingNumber: 'Tracking number',
trackingNumberPrefix: 'Tracking no.',
trackingUrl: 'Tracking Url',
trySigningInWithOrderNumber: 'Try signing in with order number',
unavailable: 'Unavailable',
unfulfilled: 'Unfulfilled',
verificationCodeField: '6-digit code',
whatIsWrongWithOrder: 'What is wrong with your order?',
yourEmail: 'Your email',
yourOrders: 'Your orders',
yourPhoneNumber: 'Your phone number',
}

var gorgiasChatInterval = window.setInterval(function() {
if (window.GorgiasChat && GorgiasChat.hasOwnProperty("updateSSPTexts") && GorgiasChat.hasOwnProperty("updateTexts")) {
window.clearInterval(gorgiasChatInterval); // this line breaks out of the loop - make sure it's not deleted.

window.GORGIAS_CHAT_TEXTS = chatDict
GorgiasChat.updateTexts(chatDict)
GorgiasChat.updateSSPTexts(sspDict)
}
}, 100);

</script>

Instructions for Shopify:

  1. Go to your Shopify's theme.liquid to edit the code.
    1. Navigate to your Shopify home screen.
    2. Click on Online Store on the left.
    3. Select ThemesActionsEdit code.
    4. Under Layout, choose theme.liquid.
  2. Add the code:
    1. Copy the code above.
    2. Paste the code at the last line of the text code box.
  3. Edit the text of the item that you want to change.
    1. For example, you want to edit the message input placeholder ("Type a message...")
      1. If you want to change this, erase the text between the quotation marks.
  4. Click Save

Programmatically capture an email

You may want to set a user email programmatically. To do so, we exposed the `captureUserEmail` method that allows you to change the user email associated to the current chat conversation - please note that this variable is only trustworthy after the Chat initialization.

var gorgiasChatInterval = window.setInterval(function() {
if (window.GorgiasChat && GorgiasChat.hasOwnProperty("captureUserEmail")) {
window.clearInterval(gorgiasChatInterval); // this line breaks out of the loop - make sure it's not deleted.
GorgiasChat.captureUserEmail('user@example.com');
}
}, 100);

Programmatically set the Shopify context

You may want to set the Shopify context programmatically. This is useful when using our chat widget in a headless Shopify. To do so, we expose the setShopifyContext method that allows you to provide the Shopify permanent domain (that contains `.myshopify.com`), the user Shopify email, and the Shopify customer id. Note that the Shopify permanent domain parameter is required for this function, while the other parameters are nullable. - please note that this variable is only trustworthy after the Chat initialization.

var gorgiasChatInterval = window.setInterval(function() {
if (window.GorgiasChat && GorgiasChat.hasOwnProperty("setShopifyContext")) {
window.clearInterval(gorgiasChatInterval); // this line breaks out of the loop - make sure it's not deleted.
GorgiasChat.setShopifyContext('shopname.myshopify.com', 'shopifyuser@email.com', 123456789);
}
}, 100);

// if user email and customer id not known
var gorgiasChatInterval = window.setInterval(function() {
if (window.GorgiasChat && GorgiasChat.hasOwnProperty("setShopifyContext")) {
window.clearInterval(gorgiasChatInterval); // this line breaks out of the loop - make sure it's not deleted.
GorgiasChat.setShopifyContext('shopname.myshopify.com');
}
}, 100);

Programmatically capture the Shopify cart

You may want to link a specific cart with the current chat user. To do so, we expose the `captureShopifyCart` method that allows you to provide the Shopify Cart of the Shopify user currently using the chat. The cart details will be displayed in the sidebar of the ticket on the helpdesk application.

async function getCart(url = '/cart.json') {
const response = await fetch(url, {
method: 'GET',
});
return response.json();
}

var gorgiasChatInterval = window.setInterval(function() {
if (window.GorgiasChat && GorgiasChat.hasOwnProperty("captureShopifyCart")) {
window.clearInterval(gorgiasChatInterval); // this line breaks out of the loop - make sure it's not deleted.

getCart().then(cart => {
GorgiasChat.captureShopifyCart(cart);
});
}
}, 100);


What do you think? Yay or Nay?