How to add an embed code from a Third-party app to EComposer?

Author: An Do 10613 views

Embed third-party app code in EComposer with the Code element

EComposer already has built-in extensions for many popular third-party apps, so you can add them to your pages without touching any code. You can browse the full list here.

If the app you want to use isn’t on that list yet, don’t worry. Most apps give you an embed code, and you can paste it into EComposer’s Code element to show the app’s widget anywhere on your page. This article walks you through how to do it.

1. Get the embed code from the third-party app

First, you’ll need the app’s embed code. Many apps show it right in their dashboard, usually in a section such as “Publish”, “Install” or “Embed”; if you can’t find it, contact the app’s support team via their chat box or email and ask for the embed code. For example, in Nitro Lookbook, open your lookbook, go to the Publish step and copy the code under Method 2: Add embed codes to your page.

Copy the embed code from the Publish step of the Nitro Lookbook app

2. Add the embed code with the Code element

Now that you have the code, you can place it on your page in just a few steps using the Code element.

Step 1: Open your page in the EComposer editor and click the Add (+) icon on the left sidebar. Next, type Code in the search box (or expand the Shopify group), and you’ll find the Code element listed under Shopify.

Find the Code element under the Shopify group in the Add panel

Step 2: Drag the Code element and drop it where you want the app to appear on your page. Once it’s dropped, the element is selected and its settings open on the right.

The Code element dropped into a section on the EComposer canvas

Step 3: In the Content tab, delete the sample text in the Custom Code box and paste the embed code you got from the app.

Paste the embed code into the Custom Code box in the Content tab

You can add HTML, JavaScript, CSS and Shopify Liquid code here, but please don’t include <html>, <head> or <body> tags, because they can conflict with other elements on the page.

Step 4: Click Save at the top right to keep your changes, then publish the page when you’re ready.

Click Save at the top right of the EComposer editor

Many app widgets rely on scripts that only run on the live store, so they may not show up inside the editor. To check the result, preview or open your published page on the storefront. If the widget still doesn’t appear, double-check the code with the app’s support team or contact EComposer support via live chat.