Member
Account Settings
Share AgencyGenius
Know someone who might benefit from AgencyGenius? We'd love it if you shared our platform with your networking group!
A handy collection of links, APIs, and technical info and general info worth knowing about. No deep dives, just solid starting points when you need to get something working.
Using Emojis
Ensure consistent emoji display across all devices and platforms. Learn why native emojis can cause design inconsistencies and how to use Apple emoji PNGs for a professional, uniform appearance.
Using Emojis
The Problem with Native Emojis
Most design studios use Macs and frequently incorporate emojis from the emoji menu into their designs. However, Windows PCs and certain mobile devices don't support the same emoji designs, resulting in inconsistent visual experiences across different platforms and devices.
Why This Matters
It's our professional opinion that Apple's emoji designs are significantly higher quality than those found on Android and other platforms. When your carefully crafted design displays different emojis on different devices, it can:
- ✗ Break your intended visual hierarchy and design aesthetic
- ✗ Create inconsistent brand experiences across platforms
- ✗ Display lower-quality emoji designs on certain devices
The Solution: Apple Emoji PNGs
There's a helpful tool that allows you to download Apple emojis as transparent PNG files. By using these image files instead of native emojis, you ensure consistent display across all devices and platforms.
- ✓ Download high-quality Apple emojis as transparent PNGs
- ✓ Upload them to your CMS (Duda, Webflow, or any platform)
- ✓ Use the image URL instead of the emoji character
- ✓ Achieve consistent display wherever your content is viewed
How to Implement
Step 1: Visit the emoji download tool
Step 2: Search for and download your desired emojis as PNG files
Step 3: Upload the PNG files to your website's media library or CMS
Step 4: Use the image tag with the uploaded emoji URL:
Duda Live Site JavaScript
A JavaScript API for Duda websites that handles page transitions, script loading, and provides essential site information. Perfect for developing custom functionality on Duda sites.
Duda Live Site JavaScript
Overview
Duda's Live Site JavaScript (dmAPI) provides a robust set of methods for interacting with Duda websites. Since Duda uses AJAX/Animated navigation for page transitions, this API helps developers handle events properly and access site information.
Key Features
- ✓
Run code when a page has fully loaded with
runOnReady - ✓
Load external scripts safely with
loadScript - ✓
Execute code before page transitions with
runBeforeAjaxNavigation - ✓ Get site information (name, ID, plan, device type)
- ✓
Access navigation items and structure with
getNavItemsAsync
Example Usage
Running code after page load:
// Your code here will run after the page is fully loaded
console.log('Page is ready!');
});
Loading an external script:
// Code to run after script loads
initializeFeature();
});
Advanced Features
Duda's Live Site JS also provides access to:
- ✓ Collections and Content Library API integration
- ✓
Conversion event tracking with
subscribeEvent - ✓ Environment detection (live, preview, editor)
MemberSpace JavaScript API
A JavaScript API for interacting with MemberSpace's membership features, allowing developers to customize member experiences and react to membership events.
MemberSpace JavaScript API
Overview
The MemberSpace JavaScript API allows developers to interact with MemberSpace's membership functionality directly from their website. This enables custom experiences based on member status, content access, and user interactions.
Key Features
- ✓ Check member status and access levels in real-time
- ✓ React to membership events like sign-ups and logins
- ✓ Create custom workflows for members and non-members
- ✓ Programmatically show or hide content based on membership
- ✓ Customize membership forms and workflows
Example Usage
Checking if a user is a member:
if (member) {
console.log("User is a member!");
console.log("Email:", member.email);
} else {
console.log("User is not a member");
}
});
Listening for membership events:
console.log("New member signed up:", member.email);
// Run custom code for new sign-ups
});
Common Use Cases
- ✓ Customize UI based on membership status or plan
- ✓ Trigger analytics events when membership actions occur
- ✓ Display personalized content for different membership tiers
- ✓ Integrate with third-party tools based on member activity
DevTools by Puneet
A comprehensive CSS animation generator that serves as both a creation tool and animation library. Perfect for generating base CSS code and describing animation behaviors to AI systems for faster development.
DevTools by Puneet
Overview
DevTools by Puneet offers a comprehensive CSS animation generator that goes beyond simple creation—it's an essential animation library for modern web development. This tool excels at generating clean, reusable CSS animations that integrate seamlessly into AI-assisted development workflows.
Key Features
- ✓ Extensive library of CSS animation templates and effects
- ✓ Real-time visual preview with instant CSS code generation
- ✓ Perfect base code for AI modification and customization
- ✓ Customizable timing functions, duration, and easing controls
- ✓ Cross-browser compatible animation output
AI Development Workflow
Perfect for AI-assisted development:
- 1. Find a similar animation behavior in the generator
- 2. Copy the base CSS code from DevTools
- 3. Provide it to AI with natural language modifications
- 4. Get precise, working animations faster than ever
Common Use Cases
- ✓ Rapid prototyping of animation concepts and behaviors
- ✓ Creating concrete animation references for AI prompts
- ✓ Building consistent animation libraries for design systems
- ✓ Learning CSS animation patterns and best practices
NO-ACCESS
Only for Desktop Users
This page is only available on desktop.
Please Log in on a desktop to gain access.
