# Oppy Welcome Kit: Website Embed Deep Dive

Published: 2026-03-20
Updated: 2026-03-24
Source: https://docs.oppy.pro/n/oppy-welcome-kit-website-embed-deep-dive
Account: Oppy Inc

---

# Website Embed Deep Dive

Everything you need to know about putting Oppy on your website — from basic installation to advanced contextual triggers, page-aware conversations, and creative interactive experiences.

---

## Basic Installation

### Step 1: Get Your Embed Code
Go to [app.oppy.pro](https://app.oppy.pro) → Your Oppy → **Share** tab → **Embed Widget**

### Step 2: Paste Before `</body>`
```html
<script type="text/javascript">
  var embedKey = 'your-unique-embed-key';
  function handleOppyLoad() {
    if (typeof window.renderChatPopup === "function") {
      window.renderChatPopup(embedKey);
    }
  }
  (function () {
    var oppy = document.createElement('script');
    oppy.src = 'https://e.oppy.pro//chat_popup.js';
    oppy.onload = handleOppyLoad;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(oppy, s);
  })();
</script>
```

### What Appears
A floating chat icon in the bottom-right corner of your page. Clicking it opens the full chat interface with your Oppy's avatar, name, and any configured starter prompts.

### Where to Put It
- **Every page** — Same code works everywhere. The Oppy maintains context if the visitor navigates between pages.
- **WordPress** — Paste in Appearance → Theme Editor → footer.php, or use a "Header/Footer Scripts" plugin
- **Squarespace** — Settings → Advanced → Code Injection → Footer
- **Wix** — Settings → Custom Code → Body End
- **Webflow** — Project Settings → Custom Code → Footer Code
- **Shopify** — Online Store → Themes → Edit Code → theme.liquid before `</body>`
- **Custom HTML** — Directly before `</body>` on any page

---

## Starter Prompts (Floating Chips)

### What They Are
Clickable suggestion bubbles that appear above the chat icon before the visitor types anything. They reduce friction — visitors tap instead of thinking about what to type.

### Setting Them Up
Go to [app.oppy.pro](https://app.oppy.pro) → Your Oppy → **Share** tab → **Edit Page** → Add starter prompts

### The First 2-3 Show as Floating Chips
Only the first few prompts appear as visible chips on the page. Additional prompts show inside the chat window once opened.

### Starter Prompt Examples by Industry

**Real Estate:**
- "I'm looking to buy a home"
- "What's my home worth?"
- "Tell me about neighborhoods in [area]"

**Mortgage/Lending:**
- "What rates are available today?"
- "Help me get pre-qualified"
- "I want to refinance"

**SaaS/Technology:**
- "Show me a demo"
- "How does pricing work?"
- "I need help with my account"

**Membership Organization:**
- "What are the member benefits?"
- "How do I join?"
- "I'm an existing member with a question"

**Professional Services:**
- "I need a consultation"
- "What services do you offer?"
- "Get a quote for my project"

**E-Commerce:**
- "Help me find the right product"
- "Track my order"
- "I have a question about returns"

---

## Contextual Buttons (The Real Power)

### How They Work
Any button on your site can send a specific message to the Oppy when clicked:

```html
<button onclick="updateChatWindow('Your message here')">
  Button Label
</button>
```

The chat opens, the message appears as if the visitor typed it, and the Oppy responds with full context.

### Why This Is Powerful
Instead of sending visitors to a generic form or FAQ page, the Oppy immediately knows **exactly what the visitor was looking at** and can have a targeted, relevant conversation.

---

## Contextual Button Examples by Page Type

### Property Listing Pages
```html
<!-- On a listing detail page -->
<button onclick="updateChatWindow('Tell me more about the home at 742 Evergreen Terrace, listed for $485,000. 3 bed, 2 bath.')">
  Ask About This Property
</button>

<button onclick="updateChatWindow('I want to schedule a showing for 742 Evergreen Terrace')">
  Schedule a Showing
</button>

<button onclick="updateChatWindow('What comparable homes have sold near 742 Evergreen Terrace recently?')">
  See Comparable Sales
</button>
```

**What happens:** The Oppy can go search for the property, pull comps from the web, check calendar availability, and have an informed conversation — all from one button click.

### Product/Pricing Pages
```html
<!-- On a pricing page -->
<button onclick="updateChatWindow('I am looking at the Professional plan at $99/month. Can you help me understand if it is right for my business?')">
  Is This Plan Right For Me?
</button>

<button onclick="updateChatWindow('I want to compare the Starter and Professional plans. My team has about 10 people.')">
  Compare Plans
</button>

<button onclick="updateChatWindow('I am interested in enterprise pricing for a company with 500+ employees')">
  Get Enterprise Pricing
</button>
```

### Blog Posts / Content Pages
```html
<!-- At the bottom of a blog post -->
<button onclick="updateChatWindow('I just read your article about AI in real estate. I have questions about implementing this for my brokerage.')">
  Discuss This Article
</button>

<!-- On a case study page -->
<button onclick="updateChatWindow('I just read the case study about Example Lending Team. My company is similar — can we get similar results?')">
  Can This Work For Me?
</button>
```

### Service Pages
```html
<!-- On a specific service page -->
<button onclick="updateChatWindow('I am interested in your property management services for a 12-unit apartment building in Denver')">
  Get a Quote
</button>

<button onclick="updateChatWindow('What is included in your full-service property management package?')">
  Learn More About This Service
</button>
```

### Contact / Demo Pages
```html
<!-- Replace or supplement your demo form -->
<button onclick="updateChatWindow('I would like to schedule a demo. I run a brokerage with about a mid-sized team.')">
  Book a Demo
</button>

<button onclick="updateChatWindow('I have a quick question before I sign up')">
  Quick Question
</button>
```

### Event / Webinar Pages
```html
<!-- On a webinar registration page -->
<button onclick="updateChatWindow('I want to register for the March webinar on AI for loan officers')">
  Register Now
</button>

<!-- Post-event -->
<button onclick="updateChatWindow('I attended the webinar and want the free blueprint that was mentioned')">
  Get the Free Blueprint
</button>
```

### Support / Help Pages
```html
<!-- On each help article -->
<button onclick="updateChatWindow('I am on the help page about setting up tags but I still need help. Can you walk me through it?')">
  Still Need Help?
</button>

<!-- On the main support page -->
<button onclick="updateChatWindow('I have a billing question about my account')">
  Billing Help
</button>

<button onclick="updateChatWindow('Something is broken and I need technical support')">
  Report an Issue
</button>
```

---

## Hidden Context (Page-Aware Conversations)

### What It Is
You can silently send context to the Oppy as visitors navigate your site. This information is NOT visible in the chat — but the Oppy uses it to give better answers.

### Basic Page Tracking
```javascript
// On every page, tell the Oppy where the visitor is
document.addEventListener('DOMContentLoaded', function() {
  if (typeof updateChatWindow === 'function') {
    updateChatWindow('User is viewing: ' + document.title + ' at ' + window.location.href);
  }
});
```

### Dynamic Property Data
```javascript
// On a listing page, send the listing details
var listingData = {
  address: '742 Evergreen Terrace',
  price: '$485,000',
  beds: 3,
  baths: 2,
  sqft: 1800,
  mls: 'MLS-12345'
};
updateChatWindow('Visitor is viewing listing: ' + JSON.stringify(listingData));
```

### User State Context
```javascript
// After login, send user context
updateChatWindow('Logged-in user: ' + userName + ', Plan: ' + userPlan + ', Member since: ' + joinDate);
```

### Cart/Product Context (E-Commerce)
```javascript
// When items are added to cart
updateChatWindow('User added to cart: ' + productName + ' ($' + price + '). Cart total: $' + cartTotal);
```

---

## Form-to-Chat Bridge

### Capture Form Data, Send to Oppy
Instead of (or in addition to) submitting a form normally, send the data to the Oppy for an instant conversation:

```html
<form onsubmit="sendToOppy(event)">
  <input type="text" id="name" placeholder="Your Name" required>
  <input type="email" id="email" placeholder="Email" required>
  <input type="tel" id="phone" placeholder="Phone">
  <select id="interest">
    <option>Buying a home</option>
    <option>Selling my home</option>
    <option>Both</option>
  </select>
  <button type="submit">Chat With Us</button>
</form>

<script>
function sendToOppy(e) {
  e.preventDefault();
  var name = document.getElementById('name').value;
  var email = document.getElementById('email').value;
  var phone = document.getElementById('phone').value;
  var interest = document.getElementById('interest').value;
  
  updateChatWindow(
    'Hi! My name is ' + name + 
    '. My email is ' + email + 
    (phone ? ' and my phone is ' + phone : '') +
    '. I am interested in: ' + interest
  );
}
</script>
```

**What happens:** The form submits into the chat. The Oppy immediately has their name, email, phone, and interest — and starts a personalized conversation. This is how Example Realty built their brand kit generator.

---

## Multi-Button Layouts

### FAQ-Style Chat Triggers
```html
<div class="faq-buttons">
  <h3>Common Questions</h3>
  <button onclick="updateChatWindow('What neighborhoods do you serve?')">
    What areas do you cover?
  </button>
  <button onclick="updateChatWindow('How much do your services cost?')">
    What is your pricing?
  </button>
  <button onclick="updateChatWindow('How quickly can you start?')">
    What is the timeline?
  </button>
  <button onclick="updateChatWindow('Do you offer a guarantee?')">
    Do you guarantee results?
  </button>
</div>
```

### Category Navigation
```html
<div class="service-selector">
  <h3>What can we help with?</h3>
  <button onclick="updateChatWindow('I need help with residential real estate')">
    🏠 Residential
  </button>
  <button onclick="updateChatWindow('I need help with commercial real estate')">
    🏢 Commercial
  </button>
  <button onclick="updateChatWindow('I need property management services')">
    🔑 Property Management
  </button>
  <button onclick="updateChatWindow('I am a real estate agent looking for tools')">
    👤 I'm an Agent
  </button>
</div>
```

---

## Advanced: Dynamic Button Generation

### Auto-Generate Buttons from Page Content
```javascript
// On a listings page, create a chat button for each listing
document.querySelectorAll('.listing-card').forEach(function(card) {
  var address = card.querySelector('.address').textContent;
  var price = card.querySelector('.price').textContent;
  var btn = document.createElement('button');
  btn.textContent = 'Ask about this home';
  btn.onclick = function() {
    updateChatWindow('Tell me about ' + address + ' listed at ' + price);
  };
  card.appendChild(btn);
});
```

### Timed Pop-Up Prompt
```javascript
// After 30 seconds on page, suggest starting a chat
setTimeout(function() {
  if (typeof updateChatWindow === 'function') {
    // This triggers the chat to open with a suggestion
    updateChatWindow('Visitor has been browsing for 30 seconds on the pricing page');
  }
}, 30000);
```

---

## Styling & Customization

### Custom Colors
Pass brand colors during Oppy creation or via the API. The chat widget inherits:
- Primary color (buttons, links)
- Background color
- Text color

These are set in your Oppy's profile settings at [app.oppy.pro](https://app.oppy.pro).

### Z-Index Considerations
The embed widget uses a high z-index. If it conflicts with other elements:
```css
/* Adjust if the chat icon is hidden behind other elements */
.oppy-chat-widget { z-index: 99999 !important; }
```

---

## Prompt Configuration for Embed Visitors

Add this to your Oppy's prompt to handle website visitors well:

```
WEBSITE VISITOR HANDLING:
- Visitors from the website are browsing and may be early in their research
- Start friendly and helpful, not salesy
- If they clicked a contextual button, address that specific topic immediately
- If they ask about something on a different page, offer to help find it
- Collect their email/phone naturally during conversation (don't demand it upfront)
- If they seem qualified, offer to schedule a call or demo
- If they seem like they need support, help them or escalate to support team

Common visitor paths:
- Pricing page visitors → Help them choose the right plan
- Blog readers → Deepen engagement, offer related resources
- Listing page visitors → Answer property questions, offer showings
- Support page visitors → Resolve their issue using knowledge base
```

---

## Measuring Embed Performance

Track how the embed is performing:
- **Conversations tagged `website_chat`** — filter in [app.oppy.pro](https://app.oppy.pro) conversations
- **Engagement rate** — how many visitors open the chat
- **Qualification rate** — how many web chats result in qualified leads
- **Pages with most engagement** — check which contextual buttons get clicked most

Ask the concierge: *"Show me all website_chat conversations from the last 30 days. Which pages generated the most engagement?"*

---

**[Back to Master Guide](https://app.oppy.pro/n/oppy-welcome-kit-master-guide)**