Shopify Inbox where to edit code for changing default text in the app

[Carlo_Hive365]

Is it possible to access the Shopify Inbox app code?

For example ''Chat with us'' as a title in the opened messaging inbox does not fit with how i want to engage my website visitors.

Its not editable under Chat settings > Greeting AND I did have a look in the liquid, json and .css files but cannot see any code there...

[maxlime]

Hi

Did you find a solution? Can anybody else help with this?

[Carlo_Hive365]

Unfort., not yet

[TanjaCodi]

I checked with Shopify support now and they still haven't solved this. 😶

[hahalfons]

I need to change this aswell, did u solve it?

[Kitana]

Hi @hahalfons, thanks for reaching out to the Shopify Community. 

At this time people cannot access the coding of the Shopify Inbox app and make any changes. We hope to provide more customization in the future with the Shopify Inbox app. 

[vipluxurybrands]

That sucks 😒

[julian_]

Got a solution. 

If in liquid-file, use <script> tag around JavaScript code.

function observeChatInbox(){
	// get inbox element
	const inboxElement = document.querySelector('#ShopifyChat');

	// change title hardcoded
	inboxElement.title = "Chat";
	// alternative using translations: inboxElement.title = '{{ "path.to.your.translation.field" | t }}';
	
	// get shadow DOM
	const shadowDOM = inboxElement.shadowRoot; // Zugriff auf den Shadow DOM
	
	// set config for observer
	let config = { attributes: false, childList: true, subtree: true };

	// Callback function to execute when mutations are observed
	let callback = function (mutationsList, observer) {
		// walk through mutations
		for (const mutation of mutationsList) {
			// if mutation target has an h2 element inside a store-info-heading 
			if(mutation.target && (storeInfoHeading = mutation.target.querySelector('.store-info-heading h2')) != null){
				// change it
				storeInfoHeading.innerHTML = 'Other heading';
			}
		}
	};

	// Create an observer instance linked to the callback function
	let observer = new MutationObserver(callback);
	// Start observing the target node for configured mutations
	if (shadowDOM !== null) {
		observer.observe(shadowDOM, config);
	}
}

// call observer when DOM is loaded
document.addEventListener("DOMContentLoaded", () => {
  observeChatInbox();
});

Explanation: I checked the DOM tree and looked at the inbox element. It is implemented as shadow-root element, so it has its own tree and cannot be influenced by CSS etc. from outside. To access elements inside it, the shadow root needs to be accessed explicetly. However, in my case the inbox element is defined “open” (maybe it's not with all shopify plans?), so I can manipulate it with JavaScript. You can check if it's open with developer tools in your browser -> inspect the chat element:

If yours is open as well, you can access it through your theme code. 

[hustlio]

Hey buddy, my code is "open" just like yours. I tried implemeting the code but not sure which part of the code has to be altered to fit the wording I want and how.

How should the code look like if I want it to say "Get in touch with us" for example? I'd highly appreciate your assistance!

[julian_]

You can change the wording of the heading by altering this line of the code:

storeInfoHeading.innerHTML = 'Other heading';

If you want to change it hard and english only, you just alter it like this:

storeInfoHeading.innerHTML = 'Get in touch with us';

If you offer your store in different languages with Shopify's translation tools, I'd recommend using a custom locale variable.

[julian_]

I should have added: don't use the code if you don't know what you are doing. The above code might break your theme scripts. 

If you want to use the code without worrying too much about whether it always does alter the chat box at least use this one:

function observeChatInbox(inboxElement){
	const shadowDOM = inboxElement.shadowRoot; 
	let config = { attributes: false, childList: true, subtree:
	let callback = function (mutationsList, observer) {
		try {
			for (const mutation of mutationsList) {
				if(mutation.target && (storeInfoHeading = mutation.target.querySelector('.store-info-heading h2')) != null){
					storeInfoHeading.innerHTML = 'YOUR OTHER HEADING HERE';
				}
			}
		} catch(err) {
		}
	};
	let observer = new MutationObserver(callback);
	if (shadowDOM !== null) {
		observer.observe(shadowDOM, config);
	}
}

document.addEventListener("DOMContentLoaded", () => {
	const inboxElement = document.querySelector('#ShopifyChat');
	if(inboxElement){
		observeChatInbox(inboxElement);
	}
});

[hustlio]

I appreciate your reply. Just tried using the code in my theme.liquid file with <script> opening and closing tag but without luck, pretty much nothing changed. Am I doing the right thing..?

[TanjaCodi]

Hello @hustlio I didn't find the way to change it, it's an iframe, and you can't change anything in it. We need to wait for app developers to enable this option.