Skip to main content

Showit installation

Showit Testimonials for Desktop and Mobile

Showit sites are drag and drop canvases with two separate designs: one for desktop, one for mobile. Its Embed Code element takes a widget as a black box you size by dragging corners. Showit renders the code exactly as pasted and warns that not every embed scales, so the real work is sizing that box twice, once per design, and keeping it on a canvas that is always visible.

  • Code for the Custom Code field in Embed Info
  • Sizing the box on the desktop and the mobile design
  • The Chrome clipboard fix when paste does nothing
Use the free toolStart free (opens in a new tab)
Showit · Box A: one widget on the page

Design App › Bottom Toolbar › Element Icon › Embed Code › Properties Panel › Embed Info › Custom Code

<div data-storyproof-widget="YOUR_WIDGET_ID"></div>
<script src="https://app.storyproof.io/embed.js" async></script>

3 places to paste in Showit. Your widget id goes in once.

Free tool, no sign-upTry it below

Showit Embed Code

Paste this into Showit’s Embed Info tab

Fill in your widget id. For one widget on a page, Box A carries both lines. If one Showit page holds two widgets, say a short strip near the top and a full wall lower down, use Box B for each and put the script in just one of the boxes on that page.

Shown in StoryProof when you copy a widget’s embed code.

Part 1 · Box A: one widget on the page

Design App › Bottom Toolbar › Element Icon › Embed Code › Properties Panel › Embed Info › Custom Code

<div data-storyproof-widget="YOUR_WIDGET_ID"></div>
<script src="https://app.storyproof.io/embed.js" async></script>

Part 2 · Box B: each extra widget on the same page

Another Embed Code box on that page › Embed Info › Custom Code

<div data-storyproof-widget="YOUR_WIDGET_ID"></div>

Part 3 · Script, once per page when using Box B

Add to one of that page’s Embed Code boxes, under its div

<script src="https://app.storyproof.io/embed.js" async></script>

Save the Custom Code pop up, switch to the mobile design and resize the same box there, then preview both views and publish.

The snippet is made in your browser from the id you type. Nothing is sent or saved.

The problem, solved

Showit embed headaches and the fix

Showit hands you precise control over placement, which also means the embed is only as big as you drag it.

  • Problem 1

    Fine on desktop, broken on my phone

    Showit keeps a separate mobile design. A box sized for a wide desktop canvas can be too short or too narrow once the mobile layout tool rearranges it.

  • Problem 2

    The widget vanished on one view

    Showit lets you hide an element or a whole canvas per design, and its help says not all embed codes display properly on hidden canvases or canvas views.

  • Problem 3

    Paste does nothing in the Custom Code box

    Showit notes that Chrome can block clipboard access to the Design App.

  • Problem 4

    My template slider holds typed quotes

    Template sliders are text boxes. Every new kind word means another manual edit on two designs.

  • Problem 5

    Two widgets on one long page

    Pasting the full snippet into both boxes loads the script twice on the same page.

In StoryProof

Install it on a Showit page

Step 1 of 5

Add an Embed Code element

Select the canvas, hover over the Element Icon in the Bottom Toolbar and choose Embed Code. A black box lands on the canvas.

Before you start

Limits on Showit

  • The box does not grow by itself

    Showit says it renders embed code exactly as provided and that not all embed code scales. You size the box, so a widget taller than the box may not show in full.

  • Two designs, two sizes

    Showit’s mobile and desktop designs are edited separately. A size change on one does not carry to the other unless that setting is synced.

  • Hidden canvases are unreliable

    Showit’s help warns that embeds may not display properly on hidden canvases or canvas views. Keep the widget on a visible canvas.

  • Head code is a different field

    Showit’s Custom Head HTML and Global Custom Code fields are for head scripts like tracking pixels. The StoryProof lines belong in the Embed Code box on the canvas.

  • Showit help as of 2026-11-14

    Element, tab and setting names come from Showit’s Learn articles as read on 2026-11-14 (mobile design details from search results). Not yet followed on a live Showit site.

FAQ

Questions people ask

Short answers to what usually comes up next.

Will the widget show inside the Showit Design App?

It may not. Showit’s help says some embeds only appear in Preview. Check there and on the published page before deciding something is wrong.

Can I add the script site wide through Global Custom Code?

Showit points that field at head code such as Google Tag Manager or Meta Pixel. Keeping the script beside the div in the Embed Code box is simpler and works per page.

Does this work with a purchased Showit template?

Yes. Delete or hide the template’s typed testimonial text and drop an Embed Code box on the same canvas. The template’s styling around it stays.

Can I show a full page of testimonials instead?

Showit’s Embed Info panel also has an iFrame URL field for embedding a page by URL, but the StoryProof widget is designed to go in as code. Give it its own Showit page with a tall box.

Still have a question? Ask the StoryProof team or book a demo.

Replace the typed slider on your Showit site

Collect testimonials, approve them, and paste one widget into an Embed Code box sized for both designs.

Start free (opens in a new tab)

Sources

  1. How to Embed HTML Code, Showit Learn. Checked 2026-11-14.
  2. Embedding Widgets, Showit Learn. Checked 2026-11-14.
  3. Can I Add Custom HTML Code Into My Site’s Head Section?, Showit Learn. Checked 2026-11-14.
  4. How to Show or Hide Design Elements Between the Mobile & Desktop Design, Showit Learn. Checked 2026-11-14.

Last updated 2026-11-14.