Skip to main content

Embed your Store into your own website

store, embed, sales

Sending buyers straight to your Store

You can always send buyers directly to your Store: just share its address. If your Store is in more than one language, each language has its own address (one with /en/ and one with /he/).

It's often more attractive to embed the Store in your own website. There are two ways to do this:

  • Pop-up (recommended): a button on your website opens the Store in a window in the middle of the page.

  • On the page: the Store appears as part of your page.

In the examples below, replace YOUR-STORE-URL with your Store's address.

Step 1: Add our script to your page

Add this line to each page where you want the Store, for example just before the closing </body> tag:

<script src="https://secured.givingtech.org/Content/js/givingtech-embed.js" async></script>

You only need it once per page, even if the page has several buttons or Stores.

Step 2a: Open the Store in a pop-up

Add the data-givingtech-modal attribute to any button or link:

<button data-givingtech-modal="YOUR-STORE-URL" data-givingtech-title="Buy tickets">Buy tickets</button>

When the buyer clicks it, the Store opens in the middle of the page. When they click to pay, the payment form opens in the same pop-up. The pop-up closes when the buyer clicks the X, presses Esc, or clicks outside it.

Already have a button or link? Just add the attribute to it:

<a href="#" class="btn btn-primary" data-givingtech-modal="YOUR-STORE-URL">Buy now</a>

Step 2b: Show the Store on the page

Paste this where you want the Store to appear:

<div data-givingtech="YOUR-STORE-URL" data-givingtech-title="Buy tickets"></div>

The Store fills the width of the area you place it in, and its height adjusts automatically as buyers add items. There's no need to set a height, and buyers never see scrollbars inside the Store. When the buyer clicks to pay, the payment form opens in a pop-up over your page.

To limit the width, place it inside a container:

<div style="max-width: 700px; margin: 0 auto;">
  <div data-givingtech="YOUR-STORE-URL"></div>
</div>

Opening the Store from your own code

If you'd rather open the pop-up from your own JavaScript:

GivingTech.openModal('YOUR-STORE-URL', 'Buy tickets')

Good to know

  • Campaign tracking: parameters in your page's address (for example utm_source and utm_campaign) are passed on to the Store automatically.

  • Using the old script? If your page loads IGModal.js and uses the ig_open_modal class, it keeps working. We recommend switching: replace the old script with the one in step 1, and replace the ig_open_modal class with data-givingtech-modal="YOUR-STORE-URL".

Troubleshooting

Nothing happens when I click the button. Check that the script from step 1 is on the page, and that the address in data-givingtech-modal is your Store's full address, starting with https://.

The Store doesn't appear on the page. Some website builders remove <script> tags from content blocks. Add the script in your site's header or footer settings instead, or contact us by live chat.

If you're still stuck, contact us by live chat and send us the address of the page and the code you pasted.

Did this answer your question?