How to embed LiveChat App into the Checkout page

Shopify Plus
1

Hi Everyone,

I’m trying to upgrade checkout.liquid to Checkout Extension. I had embedded custom javascript code into Checkout.liquid file to add LiveChat into Checkout Page.

As you know Checkout.liquid will be deprecated on Aug 2024, so how I can add LiveChat to Checkout page with Checkout Extensions? I tried to install LiveChat App, but it appeared in most of pages except checkout page.

Another thing, I had embedded some custom javascript code by using jQuery in Checkout.liquid file, how I embed these custom javascript code to Checkout page with checkout extensions.

Many Thanks.

2

Hello @phudt

There are a few ways to add LiveChat to the checkout page with Checkout Extensions. One way is to use the LiveChat app. This app will add a LiveChat widget to the checkout page, which will allow customers to chat with a live agent.

Another way to add LiveChat to the checkout page is to use a custom script. This script will load the LiveChat widget on the checkout page.

Here is an example of a custom script that you can use to add LiveChat to the checkout page:

function addLiveChat() {
  // Load the LiveChat widget.
  var script = document.createElement('script');
  script.src='https://cdn.livechatinc.com/widget/chat.js';
  script.async = true;
  document.body.appendChild(script);
}

// Add the script to the checkout page.
addLiveChat();

This script will load the LiveChat widget on the checkout page. The widget will be visible to customers when they are on the checkout page.

How to embed custom JavaScript code with Checkout Extensions

You can embed custom JavaScript code with Checkout Extensions by using the script tag. The script tag allows you to load JavaScript files from external sources or to embed JavaScript code directly in the page.

Here is an example of how to embed custom JavaScript code with Checkout Extensions:

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>

<script>
  $(document).ready(function() {
    // Your custom JavaScript code here.
  });
</script>

This code will load the jQuery library from an external source and then embed the custom JavaScript code directly in the page. The custom JavaScript code will be executed when the page is loaded.

3

Hi @magecomp

Have you tried with your suggestions? where and how you can embed custom scripts into checkout page with checkout extensions?

We could embed these custom scripts into file checkout.liquid before, however checkout.liquid will be deprecated in the next year, and we have to change to checkout intensions, but checkout extension doesn’t allow us to embed scripts like your suggestions.

Regards,

Phu