Guides – Advanced Scenarios

Real-time customer feedback for German webshops

CMS Integrations

WooCommerce & Shopify Setup

Deploy the FeedBackPro tracking snippet across legacy PHP stores or headless Shopify Plus environments without breaking existing checkout flows.

WooCommerce 8.2+ Snippet Injection

Paste the FeedBackPro async loader into your theme's `functions.php` using the `wp_footer` hook. Configure the `fbp_store_id` parameter to match your merchant dashboard. Enable the "Cart Abandonment" trigger in the plugin settings to capture session data before the user leaves the `/checkout` endpoint.

View PHP Documentation

Shopify Plus Theme App Extensions

Use the `AppBridge` compatible component to render the feedback widget inside `main-cart-items.liquid` and `post-purchase.liquid`. Shopify's restricted DOM requires server-side rendering of the initialization script. Set `fbp_environment` to `production` and verify webhook delivery to `https://api.feedackpro.de/v1/events/shopify`.

Access Liquid Templates

Frontend Frameworks

React & Vue.js Implementation

Integrate the interactive survey component directly into your SPA routing pipeline with full TypeScript support and zero configuration.

React 18 Component Mounting

Install `@feedackpro/react-sdk` via npm. Wrap your application in the `` context. Use the `useSurveyTrigger` hook inside your `PostCheckout` component to fire the questionnaire after a successful `stripe_checkout.session.completed` event. The SDK automatically handles hydration mismatches.

Read React Hooks Guide

Vue 3 Composition API Setup

Import the `FeedBackProVue` plugin and register it in `main.js`. Define the survey configuration inside `setup()` using `ref()` and `watch()` to monitor cart state changes. The component exposes a `v-fbp-poll` directive for declarative placement on any DOM element. Ensure your `vite.config.js` excludes the SDK from tree-shaking.

Explore Vue Directives

Conditional Workflows

Dynamic Form Logic & Routing

Move beyond static questionnaires. Build multi-branch feedback forms that adapt to user behavior, purchase value, and historical interaction scores.

Configure branching rules using the visual logic builder. When a respondent selects "NPS 0-6", automatically route them to the "Issue Classification" block. If the cart total exceeds €150.00 at the time of submission, append the "VIP Support Priority" tag and forward the payload to your Zendesk queue via the `webhook_url` parameter. Use the `fbp_logic_if` syntax to show or hide specific fields based on previous answers, reducing survey fatigue by up to 40%.

Score-Based Branching

Define threshold operators (`gte`, `lte`, `equals`) on numeric inputs. Chain conditional blocks to create linear or tree-structured paths. The engine evaluates rules client-side before submission, ensuring instant UI updates without network latency.

Event-Driven Field Visibility

Bind form fields to custom DOM events or API responses. If the user clicks "Download Invoice" within the last 24 hours, dynamically reveal the "Documentation Quality" rating scale. All state changes are persisted in the local session store for draft recovery.

Webhook Payload Transformation

Map conditional outcomes to JSON structures before transmission. Use the `fbp_transform` pipeline to flatten nested arrays, strip PII, and append metadata like `utm_source` or `referring_page`. Validate schemas against the FeedBackPro v2.4 spec to prevent delivery failures.

Build Logic Flow