Overview
The Inline Product Page Widget (PDP Widget) lets you display AI-powered question buttons directly on your product pages. These interactive suggestion chips appear right alongside your product information, giving shoppers instant access to common questions without needing to open the full chat interface.
When shoppers click a question button, they're taken into the full Rep AI chat experience with that question already asked, making it easy to get the information they need.
What This Feature Does
The Inline PDP Widget provides a lightweight, embedded engagement point on your product pages. Instead of just showing your floating chat button, you can now display context-aware question chips that:
Show relevant questions about the specific product being viewed
Blend seamlessly into your product page layout
Encourage interaction by displaying common questions upfront
Open the chat when clicked, with the selected question pre-filled
This creates an additional touchpoint for customer engagement, complementing your existing chat widget rather than replacing it.
Why Use the Inline PDP Widget?
Increase engagement: Shoppers see relevant questions before they even think to ask
Reduce friction: No need to open chat first—questions are visible immediately
Context-aware: Questions automatically adapt to the product being viewed
Flexible placement: Embed the widget exactly where it makes sense on your product page
How It Works
For Your Shoppers
When customers view a product page, they'll see a set of suggested questions displayed inline with your product information. These might include questions like:
"What's my size?"
"Add to cart"
"What do you recommend?"
"Ask another question"
Clicking any question button opens the full Rep AI chat with that question already submitted, allowing the AI to provide an immediate, personalized response.
Behind the Scenes
The questions displayed are AI-generated and context-aware, meaning they're tailored to:
The specific product being viewed
Your product's attributes and variants
Common customer questions for similar items
Your store's typical FAQ topics
These are the same intelligent suggestion chips that would appear during a chat conversation—this feature simply brings them forward as a direct engagement point.
Setting Up the Inline PDP Widget
Step 1: Access the Console Settings
Log in to your Rep AI Console
Navigate to Settings in the left sidebar
Select Chat widget from the dropdown menu
Step 2: Enable the Inline PDP Widget
Toggle ON the "Inline PDP widget" setting
You'll see two configuration fields appear:
Title: The heading displayed above the question buttons
Custom container ID: The HTML element where the widget will render
Step 3: Configure Your Widget Title
The Title field sets the heading text that appears above your question buttons. This helps introduce the feature to shoppers.
Recommended titles:
"Ask your Concierge"
"Ask about this product"
"Have questions?"
"Need help deciding?"
"Quick questions"
Choose a title that matches your brand voice and clearly indicates the purpose of the buttons.
Step 4: Set Your Custom Container ID
The Custom container ID tells Rep where to display the widget on your product page. This is an HTML element ID that exists in your product page template.
Finding the Right Container ID
To find the best container ID for your store, you'll need to inspect your product page:
Open one of your product pages in a web browser
Right-click near where you want the widget to appear (e.g., near the product description, above the "Add to Cart" button)
Select Inspect or Inspect Element from the menu
In the developer tools that open, look for HTML elements with an id="" attribute
Find a container that's positioned where you want the question chips to appear
Copy the ID value (without the quotes or # symbol)
Example: If you see <div id="product-info">, your container ID would be product-info
Common Shopify Theme Container IDs
While every theme is different, here are some commonly used container IDs in popular Shopify themes:
product-info – Often contains product details
product-description – Product description section
product-content – Main product content area
product-details – Product details section
shopify-section-product-template – Main product section
ProductInfo – Product information container (note: some themes use capital letters)
Suggested Placement Locations
The best placement for your inline widget depends on your store's layout, but consider these popular options:
Above the "Add to Cart" button: High visibility, captures attention before purchase decision
Below the product description: Natural flow after reading product details
In a dedicated "Questions?" section: Creates a clear call-to-action area
Near size/variant selectors: Helpful for products with multiple options
Important: If you enter a container ID that doesn't exist on your product pages, the widget simply won't appear. Make sure to test your configuration on a live product page to verify correct placement.
Step 5: Save and Test
Click Save to apply your changes
Visit one of your product pages to see the inline widget in action
Verify the widget appears in the correct location
Test clicking a question chip to ensure it opens the chat properly
Understanding the Question Chips
How Many Questions Appear?
The inline widget displays up to 5 AI-generated question chips at once. These are the most relevant questions for the product being viewed, determined by Rep's AI engine.
Can I Customize the Questions?
The questions are automatically generated by Rep AI's intelligence engine and cannot be manually customized. They're the same questions that would naturally appear as suggestion chips during a chat conversation—this feature simply displays them earlier in the customer journey.
The AI determines which questions to show based on:
Product attributes and metadata
Common questions for similar products
Your store's knowledge base and FAQs
Customer behavior patterns
What Happens When a Chip Is Clicked?
When a shopper clicks any question chip:
The full Rep AI chat interface opens (typically as a modal or slide-out panel)
The selected question is automatically submitted as if the customer typed it
Your AI assistant responds immediately with a personalized answer
The conversation continues naturally from there
This creates a seamless experience where customers can quickly get answers without needing to think about what to ask or how to phrase it.
Mobile Considerations
The inline widget works on both desktop and mobile devices. On mobile:
Question chips display in a horizontally scrollable row if space is limited
Tapping a chip opens the mobile-optimized chat interface
The widget respects your mobile-specific chat widget settings
If you've configured different button positions or styles for mobile in your Chat Widget settings, those will apply when the chat opens from an inline chip click.
Troubleshooting
The widget doesn't appear on my product pages
Possible causes:
The feature toggle is OFF—verify it's enabled in your Console settings
The container ID doesn't exist on your product pages—double-check the ID using browser inspection
The container ID is misspelled—ensure exact spelling, including capital letters and hyphens
The product page template doesn't include the container—some variant or special product pages might use different templates
Solution: Use your browser's developer tools to verify the container ID exists on the specific product page where you're testing.
The widget appears in the wrong location
Possible causes:
The container ID points to an unexpected element
Multiple elements share the same ID (invalid HTML, but it happens)
Solution: Inspect your page to confirm the container ID's location, and try a different container ID if needed.
The widget shows on desktop but not mobile
Possible causes:
Your mobile template uses a different HTML structure
The container ID exists on desktop but not mobile views
Solution: Inspect your mobile product page to verify the container ID exists in the mobile template. You may need to choose a different container ID that's present on both desktop and mobile.
The widget is covered or overlapped during scrolling
Possible causes:
- Containers positioned above or below the widget have position: sticky CSS styling
- Sticky product elements like "Add to Cart" buttons, product galleries, or product information sections overlap the widget when users scroll
- Z-index conflicts between sticky product page elements and the widget
Solution: Check for sticky positioned elements on your product page using browser developer tools. You may need to:
- Choose a different container ID that's not affected by sticky elements
- Adjust your page's CSS to account for sticky element heights
- Contact your developer to modify z-index values or positioning
The widget appears cut off or doesn't display fully
Possible causes:
- The target container has a fixed or limited height set in CSS
- The container uses overflow: hidden which clips the widget content
- The container has max-height restrictions that prevent full display
Solution: Inspect the target container's CSS properties using browser developer tools. Look for:
- height: [fixed value]
- max-height: [limited value]
- overflow: hidden
If found, either choose a different container without height restrictions, or work with your developer to modify the CSS to accommodate the widget's content.
Best Practices
Choose a clear, inviting title: Use action-oriented language like "Ask about this product" rather than generic text
Test on multiple products: Verify the widget appears correctly on different product types and templates
Place it strategically: Position the widget where shoppers naturally look for information (near descriptions or before the purchase button)
Monitor engagement: Use your Rep AI analytics to track how often inline chips are clicked versus regular chat opens
Keep your product info rich: The better your product descriptions and metadata, the more relevant the AI-generated questions will be
Need More Help?
If you're having trouble setting up the Inline PDP Widget or need assistance finding the right container ID for your theme:
Contact our support team through your Rep AI Console
Use the Rep AI Helper chat widget for instant guidance
Book a consultation with our team (available for eligible plans)
The inline widget works alongside your existing chat experience, giving you more ways to connect with shoppers at the right moment.