AI Smile Widget Integration Guide: 5 Methods Explained

Choose Your Integration Method

DentalPrice AI Smile offers five integration methods, each designed for a different use case and technical comfort level. You can start with the simplest option and upgrade later without losing any data or configuration.

All five methods use the same AI engine, produce the same quality transformations, and connect to the same admin dashboard. The only difference is how you deliver the experience to your patients.

• All 5 methods use the same AI engine and quality
• Start simple and upgrade anytime — no data loss
• All integrations connect to your single admin dashboard
• Choose based on your technical comfort level and needs

Method 1: Direct Link (Zero Code)

The simplest integration — a URL you can share anywhere:

URL format: smile.dentalprice.ai/?key=YOUR_PUBLIC_KEY

Best for: - QR codes in your physical office (waiting room, reception, treatment rooms) - Social media bio links (Instagram, Facebook, TikTok) - Email marketing campaigns - SMS follow-ups after consultations - Google My Business posts

Setup time: 0 minutes. Copy your link from the admin dashboard and share it.

Pro tip: Create a QR code that links to your smile simulation and display it in your waiting area. Patients who are already in your office are the highest-converting audience for cosmetic upgrades.

• Zero code required — just copy and share a URL
• Works in QR codes, social media, email, SMS, and Google posts
• Setup time: literally 0 minutes
• Highest converting when used as QR codes in physical office

Method 2: iframe Embed (60 Seconds)

The most popular method — copy-paste a single line of HTML into your website:

Works with: WordPress, Wix, Squarespace, Webflow, custom HTML, and any website builder that supports HTML embedding.

Important: The iframe includes camera permission attributes (allow="camera") so patients can take a selfie directly in the widget. Without this attribute, camera access will be blocked by the browser.

Recommended placement: - Homepage hero section or below-the-fold CTA - Individual service pages (veneers, implants, whitening, orthodontics) - Dedicated 'Virtual Smile Makeover' landing page - Contact/consultation booking page

Responsive design: The widget automatically adapts to the container width. Set the iframe width to 100% for responsive behavior on mobile and desktop.

• Single line of HTML — copy from admin dashboard and paste
• Works with WordPress, Wix, Squarespace, and any CMS
• Camera permission must be included in iframe attributes
• Responsive — adapts to mobile and desktop automatically

Method 3: SDK Auto-Render (2 Lines of Code)

For developers who want slightly more control than an iframe but still want minimal setup:

Add a script tag to load the widget SDK, then place a div with data attributes where you want the widget to appear. The SDK reads the data attributes and renders automatically.

Advantages over iframe: - Better scrolling behavior (no nested scroll) - Native look and feel within your page - Slightly faster load time - No cross-origin restrictions for camera

• 2 lines: script tag + div with data attributes
• Better scrolling and native feel vs iframe
• No cross-origin camera restrictions
• Auto-renders without JavaScript initialization code

Method 4: SDK Advanced (Full JavaScript Control)

For developers and agencies who need complete programmatic control:

The advanced SDK exposes SmileWidget.render() with a full options object: container element, public key, theme configuration (colors, border radius), and callback functions for every lifecycle event.

SDK Events you can listen to: - smile_widget_lead_submitted — Patient submitted their contact info - smile_widget_transformation_completed — AI generated the result - smile_widget_upload_clicked — Patient clicked upload (intercept point) - smile_widget_camera_clicked — Patient clicked camera (intercept point) - smile_widget_error — Something went wrong

These events let you trigger custom analytics, CRM updates, marketing automation workflows, or any custom logic when patients interact with the widget.

• Full SmileWidget.render() API with theme and callback options
• 5 lifecycle events for deep integration
• Custom analytics triggers on every user action
• CRM and marketing automation integration via events

Method 5: Custom Form Integration (Agency Power)

The most advanced option — designed for marketing agencies managing multiple dental clients:

Intercept the upload or camera button click, show your own custom lead capture form (Salesforce, HubSpot, ClickFunnels, or custom HTML), collect the data you need, then resume the widget flow. The patient experiences a seamless journey while your form captures leads into your preferred CRM.

Agency workflow: 1. Widget loads on client's website 2. Patient clicks 'Upload Photo' or 'Take Selfie' 3. SDK fires smile_widget_upload_clicked event 4. Your code shows a custom lead form (name, email, phone, procedure interest) 5. Patient fills out the form, data goes to your CRM 6. Your code calls SmileWidget.resume() to continue the transformation 7. Patient sees their new smile

This gives agencies complete control over lead capture while leveraging DentalPrice's AI transformation engine. You own the lead data in your CRM from the very first interaction.

• Intercept any button click to inject custom forms
• Works with Salesforce, HubSpot, ClickFunnels, or custom HTML
• SmileWidget.resume() continues the flow after form submission
• Agency owns lead data in their CRM from the first interaction
• Seamless patient experience — form feels like part of the widget