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 → Your Oppy → Share tab → Embed Widget

Step 2: Paste Before `</body>`

<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 → 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:

<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

<!-- 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

<!-- 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

<!-- 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

<!-- 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

<!-- 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

<!-- 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

<!-- 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

// 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

// 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

// After login, send user context
updateChatWindow('Logged-in user: ' + userName + ', Plan: ' + userPlan + ', Member since: ' + joinDate);

Cart/Product Context (E-Commerce)

// 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:

<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

<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>

<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

// 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

// 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.

Z-Index Considerations

The embed widget uses a high z-index. If it conflicts with other elements:

/* 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 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