Understanding Tapcart and Its Integration with Digioh

Tapcart is a mobile app builder for Shopify, enabling brands to create fully functional iOS and Android apps without the need for extensive development. It provides an intuitive drag-and-drop interface, allowing merchants to design a seamless mobile shopping experience.

By integrating Digioh quizzes into Tapcart, merchants can:

• Provide Personalized Product Recommendations – Quizzes can suggest relevant products based on customer responses, enhancing conversion rates.
• Improve User Engagement – Interactive quizzes make the shopping experience more dynamic and enjoyable.
• Enable Direct Shopping Actions – Digioh quizzes allow users to add products directly to the cart and navigate to product detail pages (PDPs) without leaving the app.
• Ensure Compatibility Across Tapcart Versions – Whether merchants use the older HTML-based version or the newer React-based version, Digioh integrates smoothly.

This guide details how to embed a Digioh quiz in Tapcart, ensuring a seamless experience for merchants and customers.

Retrieving Digioh’s Script Tag and Smart Tag Code

Before proceeding, obtain the required script tag and Smart Tag code from Digioh:

1. Get the Script Tag
   • Go to the Digioh Admin Menu.
   • Select your name or company name (top right options in the menu).
     
   • Click Setup Instructions.
   • Copy the script to your clipboard.See more details here
2. Get the Smart Tag Code
   • Navigate to the Digioh box you want to embed.
   • Under Smart Tag, copy the code.
     

Read full instructions here.
These will be used later based on your Tapcart version.

Creating a Custom Block and Identifying Your Tapcart Version

To embed a Digioh quiz, you first need to create a Custom Block in Tapcart. During this process, you will also determine whether you are using the old version (HTML, CSS, JS tabs) or the new version (React-based):

Steps to Create a Custom Block

1. Navigate to your Tapcart dashboard.
2. Go to the Custom Blocks section.
3. Click on Create New Block.
4. Once inside the editor, check the available options:
   • If you see HTML, CSS, and JS tabs, you are using the older Tapcart version.
     
   • If you only see a React code editor, you are using the newer Tapcart version.
     

Now that you’ve identified your version, proceed with the appropriate steps below.

Tactical Rundown

Embedding in the Old Tapcart Version (HTML, CSS, JS Tabs)

If you’re using the Tapcart version with HTML, CSS, JS tabs, follow these steps:

1. Add Digioh’s Script Tag
   • In the HTML section, paste the script tag you copied from Digioh’s setup instructions.
2. Embed the Digioh Quiz
   • Paste the Smart Tag code into the same HTML section in Tapcart.
3. Save and Publish
   • Save your changes and publish the block in Tapcart.

Embedding in the New Tapcart Version (React-Based)

If you’re using the newer React-based Tapcart version, follow these steps:

1. Add the React Component
   • Use the following code as a starting point:

   import React from "react";
   
   export default function TapCart() {
     const digiohRef = React.useRef();
   
     React.useEffect(() => {
       if (digiohRef.current) {
         const document = digiohRef.current.ownerDocument;
         const iframe = document.createElement("iframe");
   
         digiohRef.current.appendChild(iframe);
         const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
   
         const htmlContent = `
           
             <!-- script and smart tag here -->
           
           
       `;
   
         iframeDoc.write(htmlContent);
         iframeDoc.close();
       }
     }, []);
   
     return

   ; }

2. Modify the Component
   • Inside the , add:
     • The script tag you copied from the setup instructions.
     • The Smart Tag code.
3. Save and Publish
   • Save your changes and deploy the block in Tapcart.

Don’t forget to create a new tab within your Tapcart app and include your newly created custom block so customers can access your quiz directly in your app!

Questions? Comments?
Reach out to us anytime at support@digioh.com! 🚀