Skip to main content
All CollectionsIntegrationsOther
Tapcart Integration - Gift Card Experience
Tapcart Integration - Gift Card Experience

How to integrate the Rise.ai gift card experience into your store's Tapcart app

Itay Abraham avatar
Written by Itay Abraham
Updated over 2 months ago

In this article you will find:

  1. A few things to verify before you set up the integration

  2. How to implement the Rise.ai gift card experience within Tapcart

  3. How to make the Rise gift card button visible only on the gift card product page

Please note:
The Tapcart integration is only available if you are on the Enterprise plan.

A few things to verify before you set up the integration

To start with, please ensure the following is already set up:

  • Both Rise.ai and Tapcart are installed on your Shopify store

  • The Rise.ai gift card product is already created (Shopify admin -> Products)

    • If the Rise gift card product is not created yet, please follow this article

  • You already got your Rise.ai Tapcart API token.

    • If not, please reach out to the Rise.ai Support team ([email protected]), or your dedicated Account Manager.

  • Tapcart is already defined as a sales channel for the Rise.ai gift card product

  • The checkout is not set as Tapcart's native checkout (the gift card functionality will only work on the Shopify checkout)

How to implement the Rise.ai gift card experience within Tapcart

1. Create a dedicated custom block

Within Tapcart, go to Home -> 'Custom' -> and then Click 'Launch Blocks Editor':

2. Paste the relevant code to each of the block's tabs

Once the dedicated block has been created, you will need to paste a different piece of code in each of the following tabs - HTML, CSS, and JS.

HTML: needs to be pulled from the 'index.html' section in this page. Simply copy the text and paste it within the custom block's HTML tab.

CSS: needs to be pulled from the 'styles.css' section in this page. Simply copy the text and paste it within the custom block's CSS tab.

JS: needs to be pulled from the 'scripts.js' section in this page. Simply copy the text, paste it within the custom block's JS tab, and edit in the API key you've received from Rise.ai, and your Shopify URL.

  • If you have not received your Rise.ai Tapcart API key yet, please reach out to the Rise.ai Support team ([email protected]), or to your dedicated Account Manager.

  • Important note: within this specific piece of code, there are designated placeholders in which you need to insert your Shopify URL and the API key you should have received from the Rise.ai team.

3. Place the Rise.ai gift custom block within the product template

On a drag & drop basis, we'd recommend placing the button's block above the standard Add-to-cart button:
​

[video-to-gif output image]

How to make the Rise.ai button visible only on the gift card product page

  1. Add a unique tag to the Rise.ai gift card product on your Shopify admin

    • In your Shopify admin, enter 'Products' and search 'Gift Card'

    • Find your Rise.ai gift card product, enter its page, and add a unique tag:
      ​

  2. Within Tapcart, add the above tag as a 'Conditional Tag' to the Rise.ai button

    • Enter the product page through 'App Studio' -> 'Product Detail'

    • Place your mouse cursor over the button. The 'Conditional Tag' box will pop up on the right

    • Add the unique product tag that you've assigned to the product before

      Screen Recording 2024-08-07 at 12.24.01.mov [video-to-gif output image]

    • Make sure to 'Save & Update'


​Considerations:

  • The button's design and style is based on your Tapcart's theme design. It is not customizable through CSS (if the code is customized, Tapcart's theme design will still override it). Tapcart's theme design is located in 'App Studio' -> 'Brand Kit', within your Tapcart dashboard.

Have more questions?

Feel free to contact us at [email protected] or in the chatbox.

Did this answer your question?