Skip to main content

How to embed a Live Session

This guide outlines how to generate a Live Session script to embed in your store.

Create a new embed session

If this is the first time you're adding a Live Session to your website, your first step will be to create an Embed Session. If you already have one, feel free to reuse it and jump straight to the next step!

Log in to your Terrific store and click on your name in the top right corner:

A menu will open, select "Admin Panel":

In the left-hand menu, open the "Sessions" menu and click "Embedded Sessions":

Click the Add new button:

A pop-up window will open with a few details for you to fill in:

A) Pre session. Sessions that haven't started yet.

B) Live session. Sessions whose start date and time have already begun.

C) Post session. Sessions that have already ended.

D) Time before / after. How long you'd like your session to be visible before and after it starts. You can set this in hours or days, up to a maximum of 14 days after the session ends.

E) Always keep available after session ends. Turn this on if you'd like your session to stay available even after it's over.

F) Page name. This is simply the name of your embed session — usually the name of the page where it will live. For example: Home.

G) Embed layout. Choose whether you'd like your session to appear as a floating pop-up ("Pop-up") or sit within a container on your site ("Inline").

H) Script header ID. This is the Terrific SDK code snippet that needs to go in the <head> tag of your site. It will appear once you click "Generate Script".

I) Script body. This is the code snippet you'll add to your site so your Pop-up or Inline session displays correctly. It also appears once you click "Generate Script".

Once you've filled in your session details, chosen how long it should be visible, selected your embed type, and clicked "Generate Script", you'll get the codes you need for the next step.

Heads up: you can have both versions (Pop-up and Inline) live on your site at the same time.

Embedding the Live session

Before moving forward, make sure your Embedded Session is active, otherwise, your live session won't show up on your site:

Now let's get it added to your website! For this part, you'll want to loop in your developer or web team, since it involves placing a bit of code on your site. First, add the code snippet from step H (the Script header ID) to your site:

This snippet includes our SDK along with your Terrific store ID. No need to change a thing, just place it inside the <head> tag of your website.

Next, add the script from step I (the script body). This one goes on the specific page where you'd like your live session to appear. For example, if you want your live session to show up as a pop-up on your homepage, create your embedded session as a "Pop-up" type and place this script inside the <body> of your homepage template. Here's what that looks like:

If you'd rather show your live session in its Inline version on a specific page, simply place this script inside the <body> of that page, wherever you'd like it to appear. It will look like this:

And that's it! Your live session is now up and running on your site.

Embedding session on Shopify via Custom Liquid

If your store runs on Shopify, you can use the "Custom Liquid" component to embed your session. Heads up: this method is only for the script body (step I) — your SDK script still needs to go in the <head> tag, as we mentioned earlier in this guide.

1. Log in to your Shopify store and make sure you're in the "Online Store" section, then click the Edit Theme button:

2. Go to the page where you'd like to place your live session:

3. In the "Template" section on the left-hand menu, click "Add section":

4. Search for and select the "Custom Liquid" component from the list:

5. Paste your script into the Custom Liquid box, then save your changes to the template:

Heads up: you can drag and drop the Custom Liquid block to position it wherever you'd like on your template.

Embedding session on Shopify direct in the code

If your Shopify store doesn't have the Custom Liquid component, or you'd simply prefer to add our script directly into your store's code, here's how:

1. Log in to your Shopify store and make sure you're in the "Online Store" section, then click the three-dot button and select Edit code:

2. Choose the theme or layout where you'd like to place the script:

3. Find the section within that theme or layout where you want the script to go, and paste in your Terrific script:

Save your changes, and you're all set! Your live session is now up and running on your site.

Did this answer your question?