Visual Designer Tutorial
Create features and in-app guides without writing code
What is the Visual Designer?
The Visual Designer is a no-code tool that lets you create feature tags and in-app guides by pointing and clicking on your live application. It overlays on top of your app and generates CSS selectors automatically.
Key Benefits: No code changes required • Tag features retroactively • Create guides visually • AI-assisted selector generation
Launching the Designer
To open the Visual Designer:
- Go to Features in your Rewatched dashboard
- Click Create Feature
- Select Use Visual Designer
- Enter your application URL (must have SDK installed)
- Click Launch Designer
The designer will open in a new window with your application loaded inside an iframe.
Creating a Feature Tag
Feature tags let you track clicks, views, and interactions with specific UI elements:
Click the Element
Click on any button, link, or element in your application. The designer will highlight it with a blue outline.
Name Your Feature
Give it a descriptive name like "Sign Up Button" or "Dashboard Navigation". This appears in your analytics dashboard.
Review the Selector
The designer auto-generates a CSS selector. You can review and refine it to make it more or less specific.
Choose Event Type
Select what action to track:
- Click - Button/link clicks
- View - Element appears on screen
- Focus - Input field focused
- Change - Form input changes
Save Feature
Click Save Feature. The feature immediately starts tracking new events AND applies retroactively to historical data.
Advanced Selector Techniques
For dynamic or complex elements, you can use advanced selector rules:
Text-based Matching
Match elements by their text content, useful when classes change dynamically:
Position-based Matching
Target elements by their position in a list or container:
Attribute Matching
Use data attributes or aria labels for stable selectors:
Instance-Specific Features
If you have multiple instances of your application (e.g., app.example.com, staging.example.com), you can create features that only track on specific domains:
- When creating a feature, expand Advanced Options
- Select Target Specific Instance
- Choose the domain from your configured application URLs
- The feature will only track events from that domain
Testing Your Features
After creating a feature, verify it's working correctly:
Visit your application and interact with the tagged element
Go to Analytics → Features in your dashboard
Look for your feature name - you should see event counts incrementing
Click on the feature to see detailed analytics and user behavior
Best Practices
Use stable selectors
Prefer data attributes, IDs, or semantic HTML over dynamic class names that may change.
Be specific but not too specific
Balance specificity with flexibility. Avoid deeply nested selectors that break when layout changes.
Test in production
Always verify features work in production, not just staging. DOM structures can differ.
Avoid index-based selectors
nth-child() selectors break when items are reordered. Use them only when necessary.