WordPress Integration Guide

This guide walks you through integrating the Frak Components into your WordPress site (with or without WooCommerce) to enable referral acquisition, reward-aware sharing, and purchase tracking.

The Frak plugin works on both classic and block themes and ships each Frak component as a Gutenberg block, a shortcode, and a sidebar widget — so you can drop them in from the Block Editor, the Classic Editor, a page builder, or a widget area.

Prerequisites

Before you begin, ensure that:

1. You have a merchant account on the Frak business dashboard. Your main domain is registered automatically at sign-up — nothing else to enable on the Frak side.
2. You have admin access to your WordPress site.
3. Your WordPress site meets the plugin minimums: WordPress 6.4+ and PHP 8.0+.
4. (Optional, for purchase tracking) WooCommerce is installed and active. The plugin is HPOS-compatible.

Step 2: Generate the WooCommerce webhook secret

Frak uses a standard HMAC-signed webhook to receive order updates from WooCommerce. The secret is owned by business.frak.id (single source of truth) — the dashboard generates it for you, you paste it into the WordPress plugin, and the plugin provisions the WooCommerce webhook automatically.

1. Log in to the Frak Business Dashboard.
2. Open your merchant and navigate to Purchase Tracker.
3. Select WooCommerce, then click Register at the bottom — the dashboard automatically generates a Webhook Secret for you.
4. Copy the generated secret and keep the dashboard tab open — you'll paste it in Step 4.

Step 3: Install and activate the Frak plugin

1. Download the latest frak-integration.zip from the Frak Wallet releases. Pick the newest asset tagged wordpress-<version>.

2. Go to your WordPress admin panel. (Log in to your WordPress account, then go to Plugins → Add New Plugin → Upload Plugin.)

3. Upload the frak-integration.zip file and click Install Now.

4. Click Activate to activate the Frak plugin.

Step 4: Configure the plugin

1. In your WordPress admin panel, go to Settings → Frak.

2. Under Website Information, fill in:

• App Name — defaults to your site name. Click Use Site Name to auto-fill.
• Logo URL — defaults to your site icon. Click Use Site Icon to auto-fill, or upload a logo.

3. Under Purchase Tracking → Webhook Configuration:

• Paste the secret you copied in Step 2 into Webhook Secret.
• Confirm the Merchant row shows ✓ Connected: <your merchant name>. If it says ✗ Not resolved for this domain, check that your site's domain is registered on the dashboard (main domain works automatically; subdomains need to be added under Allowed Domains), then click Refresh Merchant.

4. Click Save Settings.

Step 5: Provision the WooCommerce webhook

The plugin wires a native WC_Webhook (visible under WooCommerce → Settings → Advanced → Webhooks) so WooCommerce owns retry, delivery logging, and admin visibility. You no longer create the webhook manually.

1. Scroll to the WooCommerce Webhook section on the Frak settings page.

2. Click Set up webhook. The button is disabled until the merchant is resolved and the secret is saved — if it's disabled, re-check Step 4.

3. Confirm the green banner: ✓ WooCommerce webhook active — order updates are being delivered to Frak. The Secret in WooCommerce row should read ✓ matches the secret saved above.

That's the full attribution setup — WooCommerce will now forward order updates to Frak, with retries and delivery logs handled by WooCommerce itself.

Step 6: Place the Frak Components

The plugin exposes three components — each available as a Gutenberg block, a shortcode, a sidebar widget, and an Elementor widget. Pick the surface that fits your theme.

Block Editor (block theme or Gutenberg)

1. Open the post, page, or template part in the Block Editor (for FSE: Appearance → Editor).
2. Click the + where you want the component and search for Frak.
3. Pick Frak Share Button, Frak Banner, or Frak Post-Purchase.
4. Tune the attributes in the block sidebar (button style, click action, reward display…), then save.

Classic Editor, page builders, or PHP templates

Use the matching shortcode. Attribute names are snake_case and mirror the block attributes:

[frak_share_button text="Share and earn!" button_style="primary" click_action="sharing-page" use_reward="1"]

[frak_banner]

[frak_post_purchase variant="referrer"]

From a theme template you can also call do_shortcode():

echo do_shortcode( '[frak_share_button text="Share & earn"]' );

Classic themes — sidebar / footer widget

Go to Appearance → Widgets, pick the target sidebar, and add Frak Share Button, Frak Banner, or Frak Post-Purchase. Each widget exposes the same attributes as the matching block via a simple form UI.

Elementor

If your site is built with Elementor, the plugin registers a Frak widget category in the editor. Drag Frak Share Button, Frak Banner, or Frak Post-Purchase from the left panel onto the canvas; the controls in the right sidebar mirror the block attributes.

Troubleshooting

• Merchant says "Not resolved for this domain" — Add the current site's host under Merchant → Allowed Domains on business.frak.id, then click Refresh Merchant on the plugin settings page.
• Webhook delivery stopped after a domain change — Same fix: add the new domain and click Refresh Merchant. The webhook URL is automatically re-pointed to the new domain.
• Webhook section shows "Secret does not match" — Re-copy the secret from the dashboard's Purchase Tracker → WooCommerce section, paste it back in Settings → Frak, save, then click Sync webhook.
• Delivery logs — Under WooCommerce → Status → Logs, select source webhooks-delivery.
• Vendor folder missing admin notice — You unzipped a developer checkout instead of the packaged release. Download the frak-integration.zip from the releases page.