TapCart allows merchants to create and manage mobile apps for their Shopify stores. With the Rep x TapCart integration, shoppers can interact with the Rep widget on your mobile app.
This article outlines how to set up the integration with TapCart. For more information about TapCart, visit the following link: https://www.tapcart.com/
Configure the Rep x TapCart integration
- Log into the Rep console at the following link: https://app.hellorep.ai/home
- In the left-hand menu, navigate to Settings > Integrations.
- On the Integrations page, select the Mobile Apps tab at the top, which will reveal the TapCart panel. Then, click Connect in the TapCart panel.
- In the pop-up modal window titled Connect to Tapcart, copy the account key, then click the hyperlinked "here" text. The hyperlink will redirect you to a GitHub article containing instructions for properly setting up the TapCart integration from TapCart's side. You can also navigate to the article using the following link: https://github.com/tapcartinc/custom-block-templates/tree/main/Rep%20AI
You can follow the instructions via the GitHub guide, or continue reading below for next steps.
-
Log into your Shopify admin account. Under Sales Channels, select Tapcart - Mobile App.
- On the left-hand side of the TapCart page, switch the toggle to Custom Blocks, then click Launch Blocks Editor.
- You will now see a screen where you need to edit the HTML, CSS, and JavaScript.
-
Copy the templated HTML, CSS, and JavaScript scripts from the GitHub article and paste them into the Custom Block Editor.
Index.html goes into the HTML section
Scripts.js goes into the JS section
Styles.css goes into the CSS section
-
In line 2 of the JavaScript file, you will see {{Account Key}}, which needs to be replaced with the account key provided in the Connect to Tapcart modal from within the Rep console.
In this example case, we would need to make the following adjustment in line 2:
var partnerKey = “qasanity1410” %% Switched from {{Account Key}} - On the right-hand side of the Custom Block screen, click Settings.
- Scroll down until you reach the Set Custom Block SDK Version field. Set the field to: v1.4
- Click Save and then close.
- Drag the custom block onto any page on your website where you would like to display Rep.
-
You can preview how this will look by clicking Preview Your App.
Need help or advice? Reach out to us at: support@hellorep.ai