Scrollchart

توسط scrollchart

Scrollchart adds a library of animated diagrams and charts to WordPress. Pick a diagram from scrollchart.com, paste its slug, and the diagram appears in your post with a clean, accessible layout that works on every device.

Features

Hundreds of ready-to-use diagrams spanning fitness, nutrition, health science, finance, marketing, statistics, computing and more
Responsive on mobile — diagrams scale to fit any column width
Light and dark themes with auto-detection of the visitor’s system preference
Accent colours to match your brand
Optional border, custom background, custom text colour
Fixed-size or fluid layout — your choice per embed
Fast page paint — diagrams below the fold defer loading by default to save bandwidth
Accessible by default — keyboard navigation, screen-reader friendly, no scroll-jacking
Works with the block editor, Classic Editor, WPBakery Page Builder, and Elementor — drag, drop, or type a shortcode

No account, no API key

Just install, activate, and start embedding. Browse the library at scrollchart.com and copy the slug of any diagram you want to use.

Upload the plugin to your WordPress site (or install from the plugin directory).
Activate it.
Open a post in the block editor and add a Scrollchart Diagram block. Or in Classic Editor / page builder text blocks, type [scrollchart slug="bell-curve"].
Browse scrollchart.com to find diagram slugs.

Optional: visit Settings -> Scrollchart to set defaults for theme, accent colour, and load behaviour.

سوالات متداول

Do I need an account on scrollchart.com?

No. The plugin works out of the box. Scrollchart.com is a free public library.

Can I use this with my page builder?

Yes. The plugin registers native elements for WPBakery Page Builder and Elementor. Both work alongside the standard block editor and shortcode.

Will the diagrams slow my pages down?

No. Diagrams below the fold defer loading until they scroll into view, and the JavaScript runs only on pages that actually have a diagram. The plugin caches diagram metadata locally so repeat page-loads don’t hit the network.

Can I customize colours to match my brand?

Yes. The block, WPBakery element, and Elementor widget all expose theme, accent colour, custom hex colours, border, and background controls. Set defaults in Settings -> Scrollchart so every embed inherits them automatically.

Does it work in AMP / mobile / dark mode?

Yes. Diagrams are responsive (no horizontal scrolling on mobile), respond to system dark-mode preference when theme is set to Auto, and don’t rely on any AMP-incompatible techniques.

How do I find a diagram slug?

Visit scrollchart.com, find a diagram you like, and click the embed button. The slug is the kebab-case identifier in the snippet — for example, the slug for the RIR / RPE Scale diagram is rir-rpe-scale.

I want a diagram you don’t have. Can you make it?

Yes. Visit scrollchart.com/request-a-diagram. Most custom requests are turned around within 72 hours.

Does the plugin connect to external services?

Yes. All of the plugin’s JavaScript and CSS ships inside the plugin itself — nothing executable is loaded from a remote server. But to display the live, interactive diagrams, the bundled loader connects to scrollchart.com at runtime for diagram DATA:

It fetches each diagram’s metadata from scrollchart.com/api/diagram (cached locally on your server so repeat page-views do not hit the network). Only the diagram slug you embedded is sent.
It loads the interactive diagram view in an iframe from scrollchart.com/embed-frame/.
It sends a view ping to scrollchart.com/api/ping. The ping sends the diagram slug and the URL of the page the diagram is embedded on. We use this to show authors where their diagrams are being used and to periodically check that the embed is still live on that page. No cookies are set and no visitor-identifying data (no IP stored long-term, no user agent, no fingerprint) is collected. Note that a page URL can itself contain information placed there by the site (for example a username or token in the path or query string); if that is a concern for a particular page, do not embed a Scrollchart diagram on it.

In the editor (admin) screens, when you are picking or creating a diagram:

The catalogue browser loads the list of available diagrams from scrollchart.com/api/catalog.json. This is a read-only request; no data about you, your site, or your content is sent. The result is cached on your server for an hour.
When a logged-in editor uses the optional Generate with AI button, the editor’s typed prompt, and an email address only if the editor chooses to enter one, are sent from your server to scrollchart.com/api/generate.php, which returns a generated diagram. This happens only when an editor actively clicks Generate; it never runs for site visitors and never runs on the front end. If you do not use the AI generator, no prompt data is ever sent.

All of these are first-party Scrollchart endpoints (the service is operated by us, scrollchart.com). What is sent, who receives it, and how it is handled are documented in our privacy policy: scrollchart.com/privacy#wordpress-plugin. Use of the service is governed by our terms: scrollchart.com/terms.

Where is the source code for the bundled JavaScript?

All JavaScript ships human-readable except the front-end loader assets/embed.js, which is minified for size. Its full commented source is included in the plugin at assets/source/embed.src.js, and is also published at scrollchart.com/embed-loader-source.txt. Build instructions (a single esbuild minify step, no bundling) are in BUILD.md in the plugin source. Every other script (the editor bundle, the WPBakery and Elementor editor glue, the block editor script) is shipped unminified.