How to integrate third-party apps with the Liquid element


This article will explain the general steps of integrating a third-party app with GemPages using the Liquid element.


Before jumping in, you should know that GemPages already has a ton of integrated apps you can use in the form of drag & drop elements. Check out our list of integrations for more details.

This article will guide you to integrate apps that are not yet on the list using the Liquid element.

Below are the basic steps that apply to all apps. If you are not familiar with coding, you are more than welcome to contact our GemPages Support Team to get help from the experts.


Get the app code

The Liquid element is used to render code, therefore, the first thing you need to do is to have access to the app’s code.

There are a few places to get the code. Some apps offer their codes from right within the app, while for others, you will have to visit their help documentation or contact support.


Paste the code into the Liquid element

Once you have the app’s code, it’s time to put it into the Liquid element.

Step 1: Go to the GemPages Dashboard and enter your selected page using the “Edit” button.


Step 2: From the left sidebar, drag & drop a Liquid element onto your preferred spot on the page


Step 3: Right-click on the Liquid element > Edit Code, or simply hit the pencil icon in the element’s label.

Paste the code you got in Step 1 here. Hit “Save” afterward.


Step 4: Hit “Save” and “Preview” to check if the code is functioning properly on your page.


For some apps, you will need to check for the result on the live page, when the page has been published.


Publish your page

After you’ve done with the integration, it’s time to hit “Publish” so GemPages could start rendering the code and display your third-party app on the live page.

Check out our Help Center for more articles, and if you have any questions, feel free to contact us via email or live chat.

Was this helpful?