Buyer surfaces

Paste one script tag in the site footer. The widget loads asynchronously, does not block the page, and works on CMS sites like WordPress, Squarespace, Webflow, and custom HTML.

Porchlight has two buyer-facing surfaces:

• Website embed: a chat bubble on the customer's existing site.
• Hosted lead page: a Porchlight-hosted page at /embed/<org-slug> for pilots, Google profile links, QR codes, campaigns, and own-domain redirects.

Both surfaces mint the same web session token, use the same agent, create the same conversation and lead records, and preserve source metadata on the conversation.

Website embed

<script
  src="https://porchlight.cymbalabs.com/widget.js"
  data-org="your-org-slug"
  data-source="website_widget"
  async
></script>

Replace your-org-slug with the slug of your Porchlight organization. You can find it in Settings -> Branding or in the URL of your dashboard.

Where to paste it

Put the snippet just before the closing </body> tag on every page where the chat bubble should appear. Most customers add it site-wide, then use page context and button copy to steer buyers into the right consult flow.

Configuration options

• data-org is required.
• data-position can be bottom-right or bottom-left.
• data-attention-text controls the callout above the bubble, such as Book a backyard project consult.
• data-attention-delay controls the callout delay in milliseconds.
• data-source labels where the conversation came from. Use website_widget, campaign, google_profile, booking_link, manual, or a short custom label.
• data-campaign is optional and is stored with the conversation source.

<script
  src="https://porchlight.cymbalabs.com/widget.js"
  data-org="your-org-slug"
  data-source="campaign"
  data-campaign="spring-service-area-page"
  data-position="bottom-right"
  data-attention-text="Book a qualified consult"
  data-attention-delay="6000"
  async
></script>

Programmatic control

The loader exposes window.PorchlightWidget:

• window.PorchlightWidget.open() opens the chat panel.
• window.PorchlightWidget.close() closes it.
• window.PorchlightWidget.toggle() toggles it.

<button onclick="window.PorchlightWidget.open()">Book a consult</button>

Hosted lead page

Use the hosted page when the pilot does not want to edit their site yet, when a Google profile needs a booking/chat link, or when a campaign needs a dedicated URL:

https://porchlight.cymbalabs.com/embed/your-org-slug
https://porchlight.cymbalabs.com/embed/your-org-slug?source=google_profile
https://porchlight.cymbalabs.com/embed/your-org-slug?source=campaign&campaign=spring-mailer

The hosted page displays business branding, product lines, service categories, service areas, proof/photo placeholders, FAQs from the knowledge base when available, and the Porchlight agent inline.

For an own-domain lead page, point a subpath such as https://book.example.com or https://example.com/start to the hosted URL. Keep the source and campaign parameters in the redirect so handoffs retain attribution.

Troubleshooting

If the bubble does not appear, check the browser console for a typo in data-org, an inactive org, or a Content Security Policy that blocks the Porchlight domain.

If the panel is blank, add frame-src https://porchlight.cymbalabs.com to the site's CSP.

Verifying it works

1. Load a page with the snippet.
2. Open the bubble.
3. Send a test message.
4. Confirm the conversation lands in the Porchlight Inbox.
5. Open the conversation or lead handoff and confirm the Source field shows the expected website, hosted page, Google profile, booking link, manual, or campaign label.

Once a buyer chats, Porchlight qualifies the project, records the lead, and moves ready buyers toward a consult, showroom visit, design call, or site visit.