Skip to content

Share

Put Sonic Weaver on your website

On this page

Any visualizer look plays on your own site, moving to a built-in beat or to the music player already on your page. It runs on your visitors' devices, sets no cookies and shows no ads. Pick a look on its template page, choose your settings under Embed on your website, and copy the snippet for your site builder.

Pick a lookDownload the WordPress plugin

See it

In the page: the real player, as your visitors see it.

Behind a section

This card is an ordinary section of a page; the motion behind it was added by one line of code, and its text and buttons work as before.

Four ways to place it

In the page

A box in your content, in any of the six shapes (16:9, 9:16, 1:1, 4:5, 4:3, 21:9).

Behind a section

It fills a section, such as your hero, behind that section's own text and buttons.

Behind the whole page

It sits behind everything, so your layout stays exactly as it is and simply gains motion.

Over a section

See-through motion over a picture or a banner. Clicks pass straight through to your site.

WordPress

  1. Download the free Sonic Weaver Embed plugin (a zip; it is on its way to the WordPress plugin directory).
  2. In your WordPress admin, open Plugins, Add New, Upload Plugin, choose the zip, then Install and Activate.
  3. Add a Sonic Weaver block to a post or page and pick the look and every setting in its sidebar, or paste the [sonicweaver] shortcode from a template page.
  4. For motion across your whole site, open Settings, Sonic Weaver: choose the look and where it sits. Your theme is not changed.
  5. Paste a Sonic Weaver template link on its own line and it turns into a player.

Other website builders

Paste one line where your builder takes custom code. For example, motion behind every page at 40% opacity:

<script src="https://sonicweaver.com/embed/v1/embed.js" data-sonic-weaver data-look="particles/starfield" data-placement="page" data-opacity="40" async></script>
  • Squarespace: Settings, Advanced, Code Injection (header) for the whole site, or a Code block on one page.
  • Webflow: Site settings, Custom code (head) for the whole site, or an Embed element on one page.
  • Shopify: Online Store, Themes, Edit code, theme.liquid (before </head>), or a Custom Liquid section.
  • Wix: Settings, Custom code (head) for the whole site. Where scripts are not allowed, use the iframe version.
  • Ghost: Settings, Code injection (site header), or an HTML card in a post.
  • Plain HTML: Paste it into your page, anywhere in the body.

Each template page writes this line for you, with the look and settings you chose.

Your settings

  • The look: any visualizer, by its engine and mode.
  • Where it sits, its shape, rounded corners and, for the layered ways, opacity.
  • What it moves to: a built-in beat at your tempo (60 to 180 BPM), a calm drift, or your page's own audio or video player.
  • Reactivity, speed (25 to 300 percent of the look's own) and your brand colours.
  • Autoplay, the controls, quality, the frame rate, an accessible title, and the corner for the mark.

Full details are in the help article Put Sonic Weaver on your website.

Privacy, accessibility and the watermark

The embed sets no cookies, shows no ads and sends no personal data. Layered motion always has a Pause motion button, and visitors who ask their device for reduced motion see a still frame with a Play button. Every embed carries a small “Made with Sonic Weaver” mark that links to the look; to have it removed for your site, message us.

Related: Templates · Embed help · Screensaver