Embed our tools on your blog

A writing resource page works best when the useful thing is right there. If a student is checking an essay length, building a citation, or estimating reading time, sending them to another tab can break the moment. They lose the instructions they were reading, they land on a page with its own navigation, and a third of them never come back to finish the task. That is why Phrasit includes lightweight embeds for the tools that educators and librarians already link to.

This guide is the practical version. It covers which tools embed cleanly, exactly where each one belongs on a page, the copy-paste iframe code, how to size the frame so the controls stay visible, how to handle the common platforms (LibGuides, WordPress, Canvas, Google Sites), and what to do when your platform strips iframes. There is a short troubleshooting list and an FAQ at the end.

Which tools embed, and where each one belongs

The current embed set covers the word counter, character counter, citation generator, and reading-time estimator. Each one has a narrow job, and the job decides where it belongs on the host page.

Word counter belongs beside any instruction with a length limit: scholarship essays, discussion-board minimums, abstract caps, or a Common App reminder. Put it directly under the sentence that names the limit, not in a sidebar where it reads as decoration.
Character counter belongs beside social-media or metadata guidance: a meta description target, a bio limit, an SMS or alt-text cap. Character work is where a counter earns its place, because the limit is usually invisible until you cross it.
Citation generator belongs on a referencing guide, but only when the page also states the local academic-integrity policy. A tool that produces a citation without the surrounding rule teaches the wrong habit.
Reading-time estimator belongs near lesson planning, newsletter editing, assembly scheduling, or speech preparation, anywhere someone needs to know how long a block of text takes to read aloud or skim.

The point is not to cover the page in widgets. One embed that matches the task beats four that compete for attention. Students should still read the instructions; the embed simply removes the one needless step of hunting for a separate utility. Every embedded surface is also marked noindex, so it supports your page without spawning a duplicate page in search results.

The basic embed: copy, paste, size

Every tool page has an embed area. Copy the iframe snippet from there. It looks like this, with the tool path swapped in for the one you want:

<iframe
  src="https://phrasit.com/embed/word-counter"
  title="Word counter"
  width="100%"
  height="420"
  loading="lazy"
  style="border:1px solid #e5e5e5; border-radius:12px;">
</iframe>

Three settings matter. Keep width at 100 percent so the frame flows with your content column instead of overflowing on a phone. Set a height that leaves the controls and the result visible without trapping the page in an inner scroll box; the word and character counters are comfortable around 380 to 460 pixels, the citation generator needs more, usually 560 to 700, because it has multiple fields. Keep loading="lazy"so the embed does not slow your page's first paint, which matters for both readers and your own Core Web Vitals.

If you are not sure of the right height, start a little tall. An embed with a small empty margin at the bottom looks finished. An embed that cuts off the result button looks broken, and a reader will not scroll inside a frame to find it.

Platform-specific steps

LibGuides (Springshare)

In the box where you want the tool, add a Media / Widgetasset rather than pasting the iframe into a Rich Text box. Springshare's rich-text editor often sanitises raw iframe HTML on save, so the widget asset is the reliable path. Paste the snippet into the embed-code field, save, and preview on a narrow window to confirm the 100 percent width behaves. Reuse the asset across guides so a single update propagates everywhere.

WordPress

On the block editor, use a Custom HTML block and paste the iframe. Do not use a paragraph block; it will escape the tags and show the code as text. On classic-editor sites, switch to the Text tab before pasting. If your host runs a security plugin that strips iframes, allowlist phrasit.com or fall back to a plain link, covered below.

Canvas, Blackboard, and Moodle

Most LMS rich-content editors have an Insert > Embed or HTML-source toggle (often a </> button). Paste the iframe there. Some institutions restrict external iframes at the account level for security; if the embed renders blank, that is the likely cause, and a direct link is the right fallback.

Google Sites

Use Insert > Embed > Embed code and paste the snippet. Google Sites previews the frame before you place it, so you can check the height there. It does not honour 100 percent width as flexibly as a CMS, so set an explicit max width that fits your content area.

When your platform strips iframes

Some locked-down platforms remove iframes no matter how you paste them. When that happens, do not fight it. Link to the canonical tool page instead. The full pages are built to work without signup, accounts, or a paywall, so the link is a complete fallback rather than a downgrade. Phrase the link as the action, not the tool name: "check your essay length" reads better than "word counter," and it tells the student why they are clicking.

Troubleshooting

The embed shows the code as text. You pasted into a rich-text or paragraph field. Use the HTML or custom-HTML block instead.
The frame is blank. Your platform or a security plugin is blocking external iframes. Allowlist phrasit.com or use a direct link.
The controls are cut off. Increase the height. The citation generator in particular needs more room than the counters.
It overflows on mobile. Confirm width is 100 percent, not a fixed pixel value, and that no parent container forces a wider min-width.

FAQ

Is there a cost or an account? No. The tools and embeds are free, and the embedded surface does not ask the reader to sign in.

Will embedding create duplicate-content problems for my site? No. Every embed surface is noindex, so search engines attribute the page to you, not to a duplicate Phrasit URL.

Can I restyle the embed to match my site?You control the frame: border, radius, width, and height. The tool inside follows the reader's light or dark preference automatically, so it sits comfortably on most themes without extra work.

Do embeds slow my page down? Keep loading="lazy" and the frame only loads when it scrolls into view, so a tool below the fold costs you nothing on first paint.

What we are building next

Phrasit already has a larger surface than the embed set: dozens of tools, citation pages for five styles and thirty source types, and guides for common student writing questions. The natural next step is more specific embeds, especially citation-generator variants for individual source types. A library guide for APA web pages should not have to start at a generic citation screen if the local context is already clear. Until those ship, the cleanest approach is to embed the general generator and link to the matching source-specific guide beside it.

For now, the easiest place to start is the word counter, character counter, citation generator, or reading level analyzer. Put the tool where the task happens, keep the surrounding guidance plain, and treat the embed as a practical support rather than a replacement for teaching.

Vikas Dulgunde