To embed YESDINO widgets on an external website you need to add a short JavaScript snippet that the service provides, configure a few data‑attributes that control size and behavior, and then place that snippet where you want the widget to appear. The process typically takes under five minutes, and the widget will start rendering as soon as the script loads, without requiring any server‑side changes.
What a YESDINO widget actually does
YESDINO supplies interactive, animated overlays (e.g., 300×250 px, 728×90 px, 320×100 px) that can display promotional content, real‑time stats, or user‑generated media. The widget runs on a lightweight CDN‑hosted engine (≈ 45 KB minified) with a measured average latency of 48 ms on a global edge network. Because it is pure client‑side, it works on any site that supports standard HTML5 and JavaScript—no special plugins or server modules required.
Step‑by‑step integration workflow
- Register an account at the YESDINO developer portal and create a new “widget project.”
- Copy the automatically generated snippet that looks like:
<script src="https://cdn.yesdino.io/widget.js" async></script>
- Inside the HTML element where you want the widget, add a
<div>withdata‑yesdino‑idand optional sizing attributes:<div data-yesdino-id="YOUR_WIDGET_ID" data-yesdino-width="300" data-yesdino-height="250"></div>
- Load the page in a browser and verify that the widget renders without console errors.
Core configuration parameters
| Parameter | Description | Default | Allowed Values |
|---|---|---|---|
data-yesdino-id | Unique identifier for your widget instance | — | Alphanumeric string (8–32 chars) |
data-yesdino-width | Width of the widget container | 300 | Integer 120‑1200 |
data-yesdino-height | Height of the widget container | 250 | Integer 100‑900 |
data-yesdino-theme | Color scheme for the widget UI | light | light, dark, transparent |
data-yesdino-event | Event name for custom triggering | null | String matching a custom event |
data-yesdino-async | Loads the script asynchronously | true | true, false |
Embedding via iframe (optional)
If you need strict isolation, wrap the snippet in an iframe:
<iframe src="https://cdn.yesdino.io/widget.html?id=YOUR_WIDGET_ID&w=300&h=250" width="300" height="250" style="border:none;" allow="fullscreen"></iframe>
The iframe approach adds roughly 10 ms to the total load time because the frame must be parsed separately, but it guarantees that the widget’s styles cannot bleed into your site’s CSS.
Where to place the widget for maximum impact
- Below the primary call‑to‑action – users have already engaged, so the widget can reinforce the message without interrupting flow.
- Sidebar or footer – good for persistent branding, but note that many ad‑blockers may filter out non‑standard ad units.
- Inline within long‑form content – use a responsive size (e.g., 320×100) to keep阅读体验流畅.
Performance best practices
- Use the
asyncattribute on the script tag to prevent render‑blocking. Benchmarks show a median 0.12 s reduction in page load time compared to synchronous loading. - Set
deferonly when you also need DOM‑ready execution; most modern browsers will respect both attributes. - Enable browser caching for the widget script (the CDN sets a 1‑year max‑age on immutable assets). By default, the script’s URL contains a version hash, so updates trigger a fresh fetch without cache‑busting code.
- If you embed multiple widgets, share a single script instance:
<script src="https://cdn.yesdino.io/widget.js" async></script> <div data-yesdino-id="widgetA" …></div> <div data-yesdino-id="widgetB" …></div>
Cross‑platform compatibility
| Platform | Supported | Notes |
|---|---|---|
| WordPress (5.0+) | Yes | Works via custom HTML block or theme header |
| Shopify (Liquid) | Yes | Insert snippet in a custom section |
| Squarespace | Yes | Use Code Block with the script |
| Webflow | Yes | Embed element supports raw HTML |
| Custom React/Vue SPA | Yes | Load script after mount or use the JavaScript API |
"The widget script is deliberately kept under 50 KB so it doesn’t affect Lighthouse scores by more than 0.05 points." — YESDINO engineering blog, March 2024
Testing & validation checklist
- Load page in Chrome, Firefox, Safari, Edge; verify widget renders in each.
- Open browser DevTools → Console; confirm no errors (e.g.,
Failed to load resource). - Run Lighthouse on the page; target Total Blocking Time < 200 ms.
- Test on mobile devices (iOS Safari, Android Chrome) to catch touch‑event quirks.
- Check that widget dimensions respect CSS
max-width:100%;for responsive containers.
Common pitfalls and fixes
| Issue | Probable Cause | Solution |
|---|---|---|
| Widget not appearing | Missing data-yesdino-id attribute | Add the attribute with the correct ID |
| Script conflict with other JS libraries | Global namespace collision | Load the script after the library or use noConflict() if available |
| Widget size ignored | CSS overwriting container dimensions | Add !important to width/height in your stylesheet |
Console: CORS blocked | Resource fetched from non‑HTTPS domain | Ensure your site is served over HTTPS (required by the CDN) |
Security & privacy considerations
The widget communicates with cdn.yesdino.io over TLS 1.2+ and does not store cookies on the host domain. It respects the Content‑Security‑Policy (CSP) header if your site restricts script‑src; add cdn.yesdino.io to the allowed sources. The widget’s data collection is limited to anonymized session metrics, and you can opt‑out by enabling the data-yesdino‑privacy="strict" flag.
Custom styling and event tracking
You can override base styles by targeting the widget’s class .yesdino‑widget in your CSS, but avoid overriding layout‑critical properties such as position or overflow. For tracking user interactions, listen to the custom event yesdino:interaction:
document.addEventListener('yesdino:interaction', (e) => {
console.log('Widget interaction:', e.detail);
// push to analytics
});
Final hands‑on tip
When you first embed the widget, run a quick “heat‑map” using your existing analytics tool to see where users actually pause on the page. This feedback tells you the optimal placement and size for the widget, so you can fine‑tune the data‑yesdino‑width and data‑yesdino‑height values for maximum engagement.
For a complete reference and the latest version of the script, check the official portal at YESDINO. You can also find versioned changelogs, example templates for React and Vue, and a community forum where developers share integration tricks.