Using Roadmap on Your Shopify Store

Roadmap allows you to collect customer feedback directly on your Shopify store with an embedded widget. Follow the instructions below to integrate Roadmap seamlessly into your Shopify theme.

Embedding the Roadmap Widget in Your Shopify Store

1. Log in to Your Shopify Admin Panel

   • Go to Shopify Admin and select the store you want to customize.

2. Navigate to Online Store → Themes

   • In the left-hand menu, go to Online Store > Themes.
   • Click Customize on your active theme.

3. Add a Custom Section for Roadmap

   • Select the page where you want the Roadmap widget to appear (e.g., Homepage, Product Page, or a dedicated Feedback page).
   • Click Add Section > Custom HTML (or Custom Liquid for newer themes).

4. Paste the Roadmap Embed Code

   • Copy and paste the following code into the custom HTML section:

     <div id="roadmap-container"></div>
     <script>
       var customerData = {
         email: "{{ customer.email }}",
         first: "{{ customer.first_name }}",
         last: "{{ customer.last_name }}"
       };
     
       customerData.email = customerData.email ? customerData.email : "";
       customerData.first = customerData.first ? customerData.first : "Not available";
       customerData.last = customerData.last ? customerData.last : "Not available";
     
       var widgetScript = document.createElement("script");
       widgetScript.type = "text/javascript";
       widgetScript.src = "https://cdn.roadmap.space/widget/roadmap.js";
       widgetScript.id = "public-roadmap";
       // Insert your roadmap ID in the row below
       widgetScript.setAttribute("data-id", "INSERT YOUR ROADMAP ID HERE");
       widgetScript.setAttribute("data-embedded", "true");
       widgetScript.setAttribute("data-container", "roadmap-container");
       widgetScript.setAttribute("data-email", customerData.email);
       widgetScript.setAttribute("data-first", customerData.first);
       widgetScript.setAttribute("data-last", customerData.last);
     
       document.getElementById("roadmap-container").insertAdjacentElement("afterend", widgetScript);
     </script>
     

   • Replace INSERT YOUR ROADMAP ID HERE with your actual Roadmap ID.

   • Your Roadmap ID can be found at: https://app.roadmap.space/#/roadmap/widgets/embed.

5. Save and Publish

   • Click Save to apply the changes.
   • Visit your Shopify store to ensure the Roadmap widget is displaying correctly.

---

Troubleshooting

• Widget Not Showing?

  • Ensure your Roadmap ID is correctly inserted in the embed code.
  • Check if third-party scripts are enabled in your Shopify settings.

• Need Help?

  • Contact us at support@roadmap.space or live chat with us.

Now your Shopify store is successfully integrated with Roadmap, allowing you to collect and manage customer feedback effortlessly! 🚀