Skip to main content

Personalization with StorifyMe

StorifyMe offers multiple ways to personalize content for your users - from tracking user actions and dynamic data personalization to advanced audience segmentation based on your CDP data.

Set customerId for User Actions Tracking​

To track user actions within the StorifyMe Widget, such as when a user clicks on a poll or performs any other action, you can set the customerId using the following steps:

widget.addEventListener('onInitialized', (event) => {
  widget.setCustomerId('customer-id-example');
});

By setting the customerId for user actions tracking, you enable the StorifyMe SDK to capture and provide information about the specific user actions performed within the widget. The customerId can be used to identify the user or correlate their actions with specific events or data in your system.

Set personal and dynamic data​

Enable dynamic personalization of elements using StorifyMe's Dynamic data feature in the app. Then, map the personal fields with the elements.

From the SDK, easily pass personalized data through to dynamically modify and adapt text, images, videos and other elements and provide a tailored user experience within your application for your user.

It can be set by calling setDynamicData once the widget is ready with an array of dynamic data objects using the following steps:

widget.addEventListener('onInitialized', (event) => {
  widget.setDynamicData([{
      dynamicIntegrationId: '12345yuio',
      data: {
          name: 'John',
          age: 30
      }
  }]);
});

Audience Segmentation (CDP Integration)​

Show personalized stories to specific user segments by integrating your CDP (Customer Data Platform) with StorifyMe.

Overview​

StorifyMe can sync audience segments from your CDP (currently supports Braze) and automatically show personalized stories to users based on their segment membership. This allows you to deliver targeted content to different user groups without managing complex targeting logic in your code.

Setup Steps​

1. Configure CDP Integration in StorifyMe Dashboard​

  1. Go to Integrations → Braze in your StorifyMe dashboard
  2. Enter your Braze REST API endpoint URL (e.g., https://rest.iad-01.braze.com)
  3. Enter your Braze REST API Key
  4. Click Save Connection
  5. Select which audiences you want to sync to StorifyMe
  6. Click Save & Sync Now

Your audiences will automatically sync every 12 hours, or you can manually trigger a sync anytime.

2. Tag Stories with Audience Segments​

Once audiences are synced, each segment becomes a tag with the format seg_<segment_id>. For example:

  • Segment "Premium Users" → Tag seg_premium_users
  • Segment "Active Shoppers" → Tag seg_active_shoppers

Add these tags to your stories in the StorifyMe editor to target specific audiences.

3. Implement User ID in Your Website​

Add the user identifier to the widget before it loads. Use the same identifier format that exists in your CDP.

main.js
// Get the widget element
const widget = document.querySelector('storifyme-widget');

// Set the user ID (must be called before widget loads)
await widget.setSegmentUserId('user@example.com');
// or
await widget.setSegmentUserId('external_user_123');

How It Works​

  1. When you call setSegmentUserId(), the widget queries StorifyMe's backend to fetch the user's segment tags
  2. The widget merges these segment tags with any existing tags on the widget
  3. Stories are filtered to show only those tagged with the user's segments
  4. If the user has no segments, they see all stories (default behavior)

Important Notes​

  • Call before load: You must call setSegmentUserId() before the widget loads stories
  • Matching identifiers: Use the exact same user identifier format as in your CDP (email, external_id, etc.)
  • Caching: User segment lookups are cached for 5 minutes for performance
  • Fallback: If segment lookup fails, the widget shows all stories by default

Full Example​

<!DOCTYPE html>
<html>
<head>
  <title>Personalized Stories</title>
</head>
<body>
  <script>
    // Assuming you have the user's info from your authentication system
    const currentUser = {
      email: 'john@example.com',
      id: 'user_12345'
    };

    // Wait for widget to be available
    document.addEventListener('DOMContentLoaded', async () => {
      const widget = document.querySelector('storifyme-widget');

      // Set user ID - use the same format as in your CDP
      await widget.setSegmentUserId(currentUser.email);

      // Widget will now show personalized stories
    });
  </script>

  <!-- Widget with personalization enabled -->
  <storifyme-widget
    account-id="your-account-id"
    widget-id="your-widget-id">
  </storifyme-widget>

  <script src="https://sdk.storifyme.com/widget.js"></script>
</body>
</html>

Testing​

To verify personalization is working:

  1. Open browser DevTools → Network tab
  2. Look for a request to /widgets/{accountId}/audience/{userId}/resolve
  3. Check the response - it should return the user's segment tags:
{
  "tags": ["seg_premium_users", "seg_active_shoppers"],
  "user_id": "user@example.com"
}
  1. The widget should only show stories tagged with these segments

Troubleshooting​

Widget shows all stories instead of personalized ones:

  • Verify the user exists in your synced Braze segments
  • Check that stories are tagged with the correct segment tags (e.g., seg_premium_users)
  • Ensure setSegmentUserId() is called before the widget loads

Console errors:

  • 404 Not Found: The user doesn't exist in any synced segments
  • 400 Bad Request: Invalid user identifier format
  • 500 Server Error: Contact StorifyMe support