Inline Notification Install Code for Collection Page

If you want to add an interactive Inline notification to your website, WiserNotify makes it easy to set up and customize inline notifications to enhance engagement and drive action.

Follow this step-by-step guide to design, configure, and publish your widget-type notification.

Step 1: Create an Inline Notification Setup#

• Log in to your WiserNotify dashboard.
• Navigate to the Inline Notification section.
• Choose to display inline notifications for Collection pages (e.g., recent sales, product visits, or stock counters).
• Then click on the Add new website button. and enter your website name.
• Then after clicking on the Install Now button for the integration code.

 

Step 2: Generate the Code#

1. Select the platform you are using:
   • Shopify
   • WooCommerce
   • Magento
   • BigCommerce
2. WiserNotify will generate a platform-specific code.
   Example for Shopify:  <div data-id=”{{ product.id }}” class=”wn_ecomm_embed_pdp_{{ product.id }} wn_ecomm_snippet_pdp”></div>
   
3. Copy the code by clicking on the green “Copy code” button.

Step 3: Add the Code to Your Product Detail Page#

1. Go to your website’s admin panel or file editor:
   • Shopify: Access the product-template.liquid file in your theme editor.
   • WooCommerce: Go to the single-product.php file or use a custom code editor.
   • Magento/BigCommerce: Access the product page template via your theme files.
2. Paste the Code into the appropriate location:
   • Place the inline code where you want the notification to appear: For example, Near the Add to Cart button, Below is the product image, Above or below the product title.

Step 4: Verify the Inline Notification#

1. Open your product detail page on your live website.
2. Check for the inline notification. It should display messages like:
   • “John S. from New York bought this item 30 minutes ago.”
   • “5 people viewed this item in the last hour.”
3. Ensure the notification updates dynamically based on real-time data.