Smyly™ guide

Add Smyly to your website

Paste one of the Website Kit embeds, from the full try-on widget to a single button, so site visitors can preview their own smile.

  • 7 min
  • 4 steps
  • Updated

What you’ll need

  • Access to edit your website’s HTML, or the email address of whoever does.

Screens shown with a fictional demo practice and AI-generated model photos.

  1. Step 1: Pick an embed

    Click Website Kit in the sidebar. Choose a style: the Full try-on widget runs the whole preview on your page, and there are a live slider, a before and after card, a how-it-works card, buttons, a banner and a floating badge.

    Each style says whether it Explains itself to a first-time visitor and where it works best. For the widget, Open a live test runs the real thing; test visits are not counted.

    The Website Kit with the Full try-on widget style selected, an Explains itself badge, and a sketch of the widget with an Open a live test link. Callout 1: Full try-on widget Callout 2: Explains itself Callout 3: Open a live test
    1. Full try-on widget
    2. Explains itself
    3. Open a live test
  2. Step 2: Copy the code and paste it into your site

    Click Copy code and paste it into your site’s HTML where you want the embed to appear. For the floating badge, paste it just before the closing body tag in your site template. The code already carries your practice name, brand color and tracked link.

    The embed code for the try-on widget in a dark code box with a Copy code button, and the Where to put it advice below. Callout 1: Copy code
    1. Copy code
  3. Step 3: Feature a treatment with the live slider

    Choose Live slider or the before and after card, then pick the Featured transformation that matches the page it goes on: veneers on your veneers page, whitening on your whitening page. Visitors drag the divider, then tap through to your preview page.

    The Website Kit with Live slider selected, the Featured transformation menu, and a live before and after slider preview. Callout 1: Live slider Callout 2: Featured transformation
    1. Live slider
    2. Featured transformation
  4. Step 4: Put each embed where it works

    Most visitors have never heard of a smile preview, so lead with one that explains it: the how-it-works card on your homepage or new-patient page, or the full widget on its own smile-preview page. Put the slider and the before and after card on cosmetic service pages, buttons next to Request an appointment, and the floating badge in your footer once another embed has done the explaining.

New to Smyly? See it on your own practice.

Start a 7-day free trial: your branded patient page is live the same day. A card is required at checkout and nothing is charged for 7 days.

Something here doesn’t match what you see? Email [email protected] and we’ll fix the guide.