DMleadgen
46d973904b
Next.js website for Rocky Mountain Vending company featuring: - Product catalog with Stripe integration - Service areas and parts pages - Admin dashboard with Clerk authentication - SEO optimized pages with JSON-LD structured data Co-authored-by: Cursor <cursoragent@cursor.com>
68 lines
2.1 KiB
TypeScript
68 lines
2.1 KiB
TypeScript
'use client'
|
|
|
|
import { useEffect } from "react"
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "@/components/ui/dialog"
|
|
|
|
interface GetFreeMachineModalProps {
|
|
open: boolean
|
|
onOpenChange: (open: boolean) => void
|
|
}
|
|
|
|
export function GetFreeMachineModal({ open, onOpenChange }: GetFreeMachineModalProps) {
|
|
useEffect(() => {
|
|
if (open) {
|
|
// Load the form embed script when modal opens
|
|
const script = document.createElement("script")
|
|
script.src = "https://link.sluice-box.io/js/form_embed.js"
|
|
script.async = true
|
|
document.body.appendChild(script)
|
|
|
|
return () => {
|
|
if (document.body.contains(script)) {
|
|
document.body.removeChild(script)
|
|
}
|
|
}
|
|
}
|
|
}, [open])
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
<DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
|
|
<DialogHeader>
|
|
<DialogTitle className="text-2xl md:text-3xl font-bold text-center">
|
|
Get Your Free Vending Machine
|
|
</DialogTitle>
|
|
<DialogDescription className="text-center pt-2">
|
|
Fill out the form below and we'll contact you within 24 hours to discuss your needs.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="mt-4 w-full h-[738px]">
|
|
<iframe
|
|
src="https://link.sluice-box.io/widget/form/zQqWU1J1XcUxjAotZQlk"
|
|
className="w-full h-full border-0 rounded"
|
|
id="inline-zQqWU1J1XcUxjAotZQlk"
|
|
data-layout="{'id':'INLINE'}"
|
|
data-trigger-type="alwaysShow"
|
|
data-trigger-value=""
|
|
data-activation-type="alwaysActivated"
|
|
data-activation-value=""
|
|
data-deactivation-type="neverDeactivate"
|
|
data-deactivation-value=""
|
|
data-form-name="Contact From Long"
|
|
data-height="738"
|
|
data-layout-iframe-id="inline-zQqWU1J1XcUxjAotZQlk"
|
|
data-form-id="zQqWU1J1XcUxjAotZQlk"
|
|
title="Contact From Long"
|
|
/>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
)
|
|
}
|
|
|