AI Chatbot Integration WP

April 2, 2025 · AI Conversations

User

4. AI chatbot integration

• Prepare system for integration with an AI chatbot (e.g. WPBot Pro):

o Bot should access collection data via WordPress.

o Support connection to external historical sources (PDFs, text files).

o Respond to user queries with text and suggested objects from the collection.

o Display object cards in responses using JSON or styled HTML templates.

Assistant

To implement **AI chatbot integration** as described, here's a step-by-step outline tailored for WordPress (with an example plugin like **WPBot Pro**) and support for external historical sources:

—

### ✅ 1. **Prepare the WordPress System**
– **Install a chatbot plugin** like [WPBot Pro](https://quantumcloud.com/wpbot-pro/) or consider a more flexible AI-based plugin such as ChatGPT for WordPress or WP Chatbot for OpenAI.
– Ensure your site is running on updated versions of:
– PHP
– WordPress
– MySQL or MariaDB
– Required REST APIs or GraphQL (via WPGraphQL)

—

### ✅ 2. **Enable Bot Access to Collection Data**
– **Create or expose a custom post type** (e.g., `collection_item`) for your collection data.
– Use **WP REST API** or **WPGraphQL** to expose fields like title, description, image, and tags.

Example REST endpoint:
`/wp-json/wp/v2/collection_item`

You can use `register_rest_field()` if you want to expose custom fields.

—

### ✅ 3. **Connect to External Historical Sources**
You have two main options:

#### A. Use Embedding + Vector Search (Advanced)
– Upload PDFs or text files and convert them into embeddings using:
– **OpenAI** (with file + embedding API)
– **Pinecone**, **Weaviate**, or **Supabase vector store**
– Store metadata in WordPress or an external DB.

#### B. Use Direct File Parsing (Simple)
– Upload PDFs to media library or external storage.
– Use a plugin (or code) that lets the bot access files via:
– `pdfparser` (PHP library)
– Custom shortcode/API that extracts key sections for search

—

### ✅ 4. **AI Response Format**
– For **text + suggested objects**, you’ll want to return:
– AI-generated answer
– 2–5 related collection items (based on relevance)

Format options:
#### A. JSON Response (for JS rendering):

{
  "answer": "The artifact you're asking about is from the 18th century...",
  "related_items": [
    {
      "title": "Vintage Compass",
      "image": "https://example.com/uploads/compass.jpg",
      "link": "https://example.com/collection/vintage-compass"
    },
    ...
  ]
}

#### B. Styled HTML Card (WordPress template example):

<div class="ai-card">
  <img src="{image_url}" alt="{title}" />
  <h3>{title}</h3>
  <a href="{link}" class="btn">View Item</a>
</div>

Create a shortcode or block like `[ai_object_card id=123]` or render dynamically from JS.

—

### ✅ 5. **Integration with WPBot Pro**
– WPBot Pro allows **custom intents + response templates**.
– Hook into its backend via PHP or use its **OpenAI API settings**.
– Customize responses using the **Template System**:
– Add filters like `wpbot_custom_response`
– Insert HTML or JSON into the reply area.

—

### ✅ 6. **Optional: Custom Plugin/Integration Layer**
If WPBot Pro’s built-in customization is limiting, consider:
– Creating a custom REST API endpoint like:
`/wp-json/ai-bot/search?q=18th+century+clock`
– Calling OpenAI (or local model) via PHP backend
– Merging AI output + related post data
– Returning the final formatted content to the chatbot UI

—

Would you like help drafting the shortcode, REST endpoint, or the HTML template for object cards?

User

GIve step-by-step to set external api sources call in elementor widget
and use WPBot pro and setup

Assistant

Sure, Neeraj! Here’s a **step-by-step guide** to **connect an external API source (e.g., PDF/text search or historical data)** to an **Elementor widget** and integrate it with **WPBot Pro** for AI-based responses.

—

## 🧩 PART 1: Connect External API Source to Elementor Widget

### 🔧 Step 1: Create the API Endpoint (PHP in Theme/Plugin)
You’ll need a custom endpoint that calls an external API (like OpenAI, a document search API, or your own PDF-parsing logic).

Add this in your theme’s `functions.php` or a custom plugin:

add_action('rest_api_init', function () {
    register_rest_route('custom/v1', '/fetch-data', [
        'methods'  => 'GET',
        'callback' => 'fetch_external_api_data',
        'permission_callback' => '__return_true'
    ]);
});

function fetch_external_api_data($request) {
    $query = sanitize_text_field($request->get_param('q'));

    // Example: Call external API
    $response = wp_remote_get("https://api.example.com/search?q=" . urlencode($query));
    if (is_wp_error($response)) return [];

    $body = wp_remote_retrieve_body($response);
    $data = json_decode($body, true);

    return rest_ensure_response($data);
}

Your endpoint is now:
**`/wp-json/custom/v1/fetch-data?q=your_query_here`**

—

### 🧱 Step 2: Create a Custom Elementor Widget

Use a plugin like **[Elementor Custom Widget Builder](https://wordpress.org/plugins/custom-widget-builder/)** or build manually via custom plugin code.

**Basic structure** (enqueue JS + HTML + style):

// Register widget
class External_Api_Widget extends ElementorWidget_Base {
    public function get_name() { return 'external_api_widget'; }
    public function get_title() { return 'External API Search'; }
    public function get_icon() { return 'eicon-search'; }
    public function get_categories() { return ['general']; }

    protected function render() {
        ?>
        <div id="external-api-widget">
            <input type="text" id="api-query" placeholder="Ask about history..." />
            <button id="search-btn">Search</button>
            <div id="api-results"></div>
        </div>
        <?php
    }

    public function _register_controls() {
        // (Optional controls)
    }
}

—

### 🧠 Step 3: Add JavaScript to Call the API

document.addEventListener('DOMContentLoaded', () => {
    const button = document.getElementById('search-btn');
    const input = document.getElementById('api-query');
    const resultsDiv = document.getElementById('api-results');

    button.addEventListener('click', () => {
        const query = input.value;
        fetch(`/wp-json/custom/v1/fetch-data?q=${encodeURIComponent(query)}`)
            .then(res => res.json())
            .then(data => {
                resultsDiv.innerHTML = data.map(item =>
                    `<div class="result-card">
                        <h3>${item.title}</h3>
                        <p>${item.summary}</p>
                        <a href="${item.link}" target="_blank">Read more</a>
                    </div>`
                ).join('');
            });
    });
});

Don’t forget to enqueue this JS file in WordPress.

—

## 🤖 PART 2: Integrate with WPBot Pro

### ⚙️ Step 1: Install and Activate WPBot Pro

– Purchase and install WPBot Pro: [https://quantumcloud.com/wpbot-pro](https://quantumcloud.com/wpbot-pro)
– Activate it in **Plugins**
– Go to **WPBot Settings > AI Integration**

—

### ⚡ Step 2: Enable OpenAI or Custom AI Endpoint

– Go to **WPBot > AI Engine**
– Choose “OpenAI” or “Custom API”
– If you're using your own API (like the one you built), set endpoint URL:

`/wp-json/custom/v1/fetch-data`

– Set method: `GET`
– Add query param (like `q`) and map it to user input

—

### 🧩 Step 3: Customize Bot Response Template (Optional)

– WPBot allows templates in **Settings > Language Center**
– Modify the AI response output to include HTML structure (e.g., result cards)

Example:

<div class="ai-response">
  <p>{response}</p>
  [Shortcode to render Elementor section or object cards]
</div>

—

### 🧠 Bonus: Use WPBot’s Custom Intents
– Go to **WPBot > Custom Intents**
– Create keywords like “history of compass” or “find artifacts”
– Map them to a **custom response**, or trigger API call and return dynamic data

—

Would you like me to generate:
1. The exact Elementor widget code as a plugin?
2. A sample API result response with 2–3 fake object cards?
3. A way to use OpenAI to generate the summary if your PDF API only gives raw text?

Let me know how deep you'd like to go!

User

4. AI chatbot integration

• Prepare system for integration with an AI chatbot (e.g. WPBot Pro):

o Bot should access collection data via WordPress.

o Support connection to external historical sources (PDFs, text files).

o Respond to user queries with text and suggested objects from the collection.

o Display object cards in responses using JSON or styled HTML templates.

Assistant

Great! Here's a **step-by-step technical guide** to **implement AI chatbot integration** using **WPBot Pro** with the goals you’ve outlined:

—

## ✅ GOAL: AI Chatbot Integration via WPBot Pro

—

### 🧱 1. **System Preparation for AI Chatbot (WPBot Pro)**

#### ✔ Install and Activate WPBot Pro:
– Purchase and install [WPBot Pro](https://quantumcloud.com/wpbot-pro/).
– From your WordPress dashboard:
– Upload and activate the plugin.
– Go to **WPBot Pro → Settings** and configure base options.

#### ✔ Enable OpenAI or Custom API:
– Go to **WPBot Pro → Settings → AI Settings**.
– Choose:
– ✅ **OpenAI** if you want ChatGPT-style answers.
– OR ✅ **Custom API** to hook your own REST endpoint (more flexible for collections).

—

### 🗂 2. **Access Collection Data via WordPress**

#### ✔ Step A: Create Custom Post Type (if needed)

function register_collection_post_type() {
    register_post_type('collection_item', [
        'label' => 'Collection',
        'public' => true,
        'supports' => ['title', 'editor', 'thumbnail'],
        'show_in_rest' => true,
    ]);
}
add_action('init', 'register_collection_post_type');

#### ✔ Step B: Expose Additional Fields via REST

add_action('rest_api_init', function () {
    register_rest_field('collection_item', 'image_url', [
        'get_callback' => function ($post) {
            return get_the_post_thumbnail_url($post['id'], 'medium');
        },
        'schema' => null,
    ]);
});

Now your collection data is available at:
`/wp-json/wp/v2/collection_item`

You can fetch title, excerpt, and image for object cards.

—

### 📜 3. **Support External Historical Sources (PDFs, Text Files)**

#### ✔ Step A: Use PDF Parsing Plugin or Script

– Option 1: Use a plugin like **PDF Embedder + REST API plugin**
– Option 2: Write your own parser with [Smalot PDF Parser](https://github.com/smalot/pdfparser) or similar libraries

#### ✔ Step B: Create a Searchable API

add_action('rest_api_init', function () {
    register_rest_route('custom/v1', '/search', [
        'methods' => 'GET',
        'callback' => 'search_external_data',
        'permission_callback' => '__return_true',
    ]);
});

function search_external_data($request) {
    $query = sanitize_text_field($request->get_param('q'));
    $results = []; // Implement actual file parsing or vector DB lookup here

    // Sample response
    $results[] = [
        'title' => 'Compass from 1850',
        'description' => 'An early 19th-century magnetic compass...',
        'image' => 'https://example.com/wp-content/uploads/compass.jpg',
        'link' => 'https://yoursite.com/collection/compass-1850'
    ];

    return rest_ensure_response($results);
}

Now available at:
`/wp-json/custom/v1/search?q=compass`

—

### 💬 4. **Respond to User Queries with Text + Suggested Objects**

#### ✔ Use WPBot Pro's Custom API Option

– Go to **WPBot Pro → AI Settings → Use Custom API**
– Enter: `/wp-json/custom/v1/search`
– Set Query Param: `q`
– Format response using:
– Plain text (answer)
– Followed by JSON array of objects or
– Rendered HTML (see next step)

—

### 🖼 5. **Display Object Cards in JSON or Styled HTML**

#### ✅ Option A: JSON + JavaScript UI (for Elementor or SPA)
Return JSON like:

{
  "response": "The object you're asking about is a navigation tool...",
  "objects": [
    {
      "title": "Compass 1850",
      "image": "https://site.com/img/compass.jpg",
      "link": "https://site.com/collection/compass-1850"
    }
  ]
}

Render it via JavaScript in an Elementor widget or theme component.

—

#### ✅ Option B: Styled HTML from PHP
Return something like:

<p>The compass you’re referring to was widely used in the 1800s...</p>
<div class="object-card">
  <img src="https://example.com/compass.jpg" />
  <h3>Compass 1850</h3>
  <a href="https://example.com/collection/compass-1850">View</a>
</div>

Use WPBot’s response template or filters to embed the HTML.

—

### 🧩 Optional Enhancements

– Use **OpenAI Embedding API** + **Supabase** or **Pinecone** to search PDFs semantically.
– Cache frequent queries in WordPress transient to improve speed.
– Use Elementor to create a “Chatbot Widget” section and insert the WPBot shortcode inside it.
– Track clicked object cards with Google Analytics for insights.

—

Would you like code for:

– PDF to Embedding vector index in Supabase?
– Elementor widget that calls your `/custom/v1/search`?
– Shortcode to format collection cards?

Let me know how you'd like to proceed.

User

Please insert 3 Adress in Map (I think we need another Plugin and not the Google map)

Assistant

You're right! If you want to **insert multiple addresses on a map without using Google Maps**, there are great **free and privacy-friendly alternatives** like **Leaflet** and **OpenStreetMap (OSM)**.

Here’s a complete solution using **Leaflet.js + a WordPress plugin**, including showing **3 custom addresses** on the same map.

—

## 🗺️ STEP-BY-STEP: Show 3 Addresses on a Map (No Google Maps)

—

### ✅ 1. Install Required Plugin

Install this **free plugin** from WordPress:
– **[Leaflet Map](https://wordpress.org/plugins/leaflet-map/)**

From your WP admin:
– Go to **Plugins → Add New**
– Search for **"Leaflet Map"**
– Install and activate it

—

### ✅ 2. Enable Shortcode Support

Once activated, the plugin lets you use the `[leaflet-map]` and `[leaflet-marker]` shortcodes.

—

### ✅ 3. Use Shortcode for 3 Addresses

Here’s an example shortcode block to paste into any **page, post, or Elementor HTML widget**:

[leaflet-map height=400px zoom=13 lat=51.505 lng=-0.09]
[leaflet-marker lat=51.505 lng=-0.09]London Office[/leaflet-marker]
[leaflet-marker lat=48.8566 lng=2.3522]Paris Office[/leaflet-marker]
[leaflet-marker lat=52.52 lng=13.4050]Berlin Office[/leaflet-marker]

### ✅ 4. If You Only Have Street Addresses

Use a free geocoding service like:

– [https://www.latlong.net/](https://www.latlong.net/)
– [https://nominatim.openstreetmap.org/](https://nominatim.openstreetmap.org/)

🔍 Example:

| Address | Latitude | Longitude |
|——————|———–|———–|
| London, UK | 51.505 | -0.09 |
| Paris, France | 48.8566 | 2.3522 |
| Berlin, Germany | 52.52 | 13.4050 |

Replace those in the shortcode above.

—

### ✅ 5. Customize with Elementor (Optional)

If using Elementor:
1. Add an **HTML widget**
2. Paste the full shortcode block above
3. Update and preview – your map with 3 pins will show

—

### 🎨 Optional Styling & Plugins

– Add custom icons with `iconUrl` (advanced usage)
– Use popup descriptions:
`[leaflet-marker lat=… lng=…]TitleAddress[/leaflet-marker]`

—

Would you like me to:
– Convert this into a reusable **Elementor template**?
– Generate **custom icons** for each marker?
– Help you build a **shortcode to render map from custom fields**?

Let me know!

User

I want to show 3 address at once in leaft map

Assistant

Perfect! Here's **exactly how to show 3 addresses at once on a Leaflet map** in WordPress using the **Leaflet Map plugin** (without Google Maps):

—

## ✅ What You’ll Need:
– The **Leaflet Map plugin** installed and activated:
[https://wordpress.org/plugins/leaflet-map/](https://wordpress.org/plugins/leaflet-map/)

—

## 🗺️ Paste this Shortcode into a Page or Elementor HTML Widget:

[leaflet-map fitbounds]

[leaflet-marker lat=51.505 lng=-0.09]London Office[/leaflet-marker]

[leaflet-marker lat=48.8566 lng=2.3522]Paris Office[/leaflet-marker]

[leaflet-marker lat=52.52 lng=13.4050]Berlin Office[/leaflet-marker]

—

### 🔍 Explanation:
– `fitbounds` automatically zooms the map to show **all markers**.
– You can add a **label inside each marker** like city or office name.
– This works in:
– WordPress pages/posts
– Elementor **HTML widget**
– Elementor **Shortcode widget**

—

### 📍 Example Locations:

| City | Latitude | Longitude |
|———|———–|———–|
| London | 51.505 | -0.09 |
| Paris | 48.8566 | 2.3522 |
| Berlin | 52.52 | 13.4050 |

—

## 🎨 Optional Styling (Popup or Bold Titles)
To make popups prettier:

[leaflet-marker lat=51.505 lng=-0.09]<b>London Office</b><br>221B Baker Street[/leaflet-marker]

[leaflet-marker lat=48.8566 lng=2.3522]<b>Paris Office</b><br>10 Rue de Rivoli[/leaflet-marker]

[leaflet-marker lat=52.52 lng=13.4050]<b>Berlin Office</b><br>Alexanderplatz</b>[/leaflet-marker]

—

Would you like me to:
– Create this as a **shortcode template** to reuse?
– Or fetch these 3 addresses from **custom fields** or ACF?

Let me know!

User

set map center to germany

Assistant

Got it! If you want to **center the Leaflet map on Germany**, but **still show all 3 markers (London, Paris, Berlin)**, here's the adjusted shortcode.

—

## ✅ Shortcode: Center Map on Germany

[leaflet-map lat=51.1657 lng=10.4515 zoom=5]

[leaflet-marker lat=51.505 lng=-0.09]<b>London Office</b><br>221B Baker Street[/leaflet-marker]

[leaflet-marker lat=48.8566 lng=2.3522]<b>Paris Office</b><br>10 Rue de Rivoli[/leaflet-marker]

[leaflet-marker lat=52.52 lng=13.4050]<b>Berlin Office</b><br>Alexanderplatz</b>[/leaflet-marker]

—

### 📍 Details:
– `lat=51.1657 lng=10.4515` is roughly **central Germany**
– `zoom=5` is a good fit for viewing **Europe with 3 cities**
– You **don’t need `fitbounds`** when manually setting center/zoom

—

Let me know if you’d like:
– Custom marker icons (flags, pins)
– Address lookup to auto-convert from text → lat/lng
– Elementor widget version of this

I'm happy to help!

User

set map height

Assistant

Sure! To **set the height of the Leaflet map**, just add the `height` parameter inside the `[leaflet-map]` shortcode.

—

## ✅ Example with Custom Height (e.g., 500px)

[leaflet-map lat=51.1657 lng=10.4515 zoom=5 height=500px]

[leaflet-marker lat=51.505 lng=-0.09]<b>London Office</b><br>221B Baker Street[/leaflet-marker]

[leaflet-marker lat=48.8566 lng=2.3522]<b>Paris Office</b><br>10 Rue de Rivoli[/leaflet-marker]

[leaflet-marker lat=52.52 lng=13.4050]<b>Berlin Office</b><br>Alexanderplatz</b>[/leaflet-marker]

—

### 📌 Notes:
– You can use any CSS unit (`px`, `%`, `vh`, etc.)
– Default is around 300px, so increasing it makes the map more usable on desktop

—

Let me know if you'd like this in a reusable **shortcode** or **Elementor widget** next!

User

[leaflet-map lat=51.1657 lng=10.4515 height=500px

[leaflet-marker lat=54.104132 lng=-10.831285]Neustadt
Rettiner Weg 69 – 75,
23730 Neustadt[/leaflet-marker]

[leaflet-marker lat=53.893126 lng=11.533826]Wismar
Rüggower Weg 19,
23970 Wismar[/leaflet-marker]

[leaflet-marker lat=54.283951 lng=10.878605]Oldenburg
Neustädter Straße 12,
23758 Oldenburg[/leaflet-marker]
but now pointer not showing in center we need it to center

Assistant

Thanks! The issue you're seeing is because you're **centering the map statically on Germany** (`lat=51.1657 lng=10.4515`) — but your markers are spread **further north (Neustadt, Wismar, Oldenburg)**, so the pins appear off-center.

—

## ✅ Best Solution: Use `fitbounds` Instead of Manual Centering

`fitbounds` tells Leaflet to **automatically center and zoom** to include **all markers** in view — and it's exactly what you need here.

—

### 🔄 Replace your shortcode with this:

[leaflet-map height=500px fitbounds]

[leaflet-marker lat=54.104132 lng=10.831285]<b>Neustadt</b><br>Rettiner Weg 69 - 75,<br>23730 Neustadt[/leaflet-marker]

[leaflet-marker lat=53.893126 lng=11.533826]<b>Wismar</b><br>Rüggower Weg 19,<br>23970 Wismar[/leaflet-marker]

[leaflet-marker lat=54.283951 lng=10.878605]<b>Oldenburg</b><br>Neustädter Straße 12,<br>23758 Oldenburg[/leaflet-marker]

—

### ✅ Why This Works:
– `fitbounds` automatically adjusts **center and zoom** based on all markers
– No need to set `lat/lng/zoom` manually
– Ensures **all markers are always visible**, no matter where they are

—

Let me know if you want to:
– Add **custom pin icons**
– Group markers into **clusters**
– Load marker data dynamically from a **Custom Post Type or ACF**

Happy to help!

User

Oldenburg
Neustädter Straße 12,
23758 Oldenburg this address still need to zoom in to view

Assistant

Ah yes — that means the `fitbounds` is zooming out *just enough* to fit all markers, but **Oldenburg is right at the edge**, so it may look slightly off or small on screen.

—

### ✅ 3 Fix Options (Pick One)

—

### **🔧 Option 1: Use `fitbounds` + `maxZoom`**

This is the **best combo** — it still auto-zooms to fit all markers, but won't zoom out too far.

[leaflet-map height=500px fitbounds maxzoom=10]

[leaflet-marker lat=54.104132 lng=10.831285]<b>Neustadt</b><br>Rettiner Weg 69 - 75,<br>23730 Neustadt[/leaflet-marker]

[leaflet-marker lat=53.893126 lng=11.533826]<b>Wismar</b><br>Rüggower Weg 19,<br>23970 Wismar[/leaflet-marker]

[leaflet-marker lat=54.283951 lng=10.878605]<b>Oldenburg</b><br>Neustädter Straße 12,<br>23758 Oldenburg</b>[/leaflet-marker]

> 🔎 `maxzoom=10` ensures the map won’t zoom out too much — adjust `10` to `9` or `11` based on your comfort.

—

### **📍 Option 2: Manually Set Center + Zoom**

If you want **full control**, center the map manually near Oldenburg and zoom in:

[leaflet-map lat=54.15 lng=11.0 zoom=9 height=500px]

[leaflet-marker lat=54.104132 lng=10.831285]<b>Neustadt</b><br>Rettiner Weg 69 - 75,<br>23730 Neustadt[/leaflet-marker]

[leaflet-marker lat=53.893126 lng=11.533826]<b>Wismar</b><br>Rüggower Weg 19,<br>23970 Wismar[/leaflet-marker]

[leaflet-marker lat=54.283951 lng=10.878605]<b>Oldenburg</b><br>Neustädter Straße 12,<br>23758 Oldenburg</b>[/leaflet-marker]

—

### **📌 Option 3: Highlight Oldenburg Marker with Popup Open**

This helps visually call attention to Oldenburg:

[leaflet-map height=500px fitbounds]

[leaflet-marker lat=54.104132 lng=10.831285]<b>Neustadt</b><br>Rettiner Weg 69 - 75,<br>23730 Neustadt[/leaflet-marker]

[leaflet-marker lat=53.893126 lng=11.533826]<b>Wismar</b><br>Rüggower Weg 19,<br>23970 Wismar[/leaflet-marker]

[leaflet-marker lat=54.283951 lng=10.878605 popupopen]<b>Oldenburg</b><br>Neustädter Straße 12,<br>23758 Oldenburg</b>[/leaflet-marker]

—

Would you like to:
– Show custom colored markers for each city?
– Load all markers dynamically from a custom post type?

Let me know and I can help build that too!

User

how to pre open address dialog

Assistant

To **pre-open a marker popup (dialog) in Leaflet using the Leaflet Map plugin**, all you need to do is add the attribute `popupopen` to the `[leaflet-marker]` shortcode.

This will automatically open the popup when the map loads.

—

## ✅ Example: Pre-open One Address Dialog (e.g., Oldenburg)

[leaflet-map height=500px fitbounds]

[leaflet-marker lat=54.104132 lng=10.831285]<b>Neustadt</b><br>Rettiner Weg 69 - 75,<br>23730 Neustadt[/leaflet-marker]

[leaflet-marker lat=53.893126 lng=11.533826]<b>Wismar</b><br>Rüggower Weg 19,<br>23970 Wismar[/leaflet-marker]

[leaflet-marker lat=54.283951 lng=10.878605 popupopen]<b>Oldenburg</b><br>Neustädter Straße 12,<br>23758 Oldenburg</b>[/leaflet-marker]

—

### 🔍 Important Notes:
– Only **one marker** can have `popupopen` at a time — the first one with it will trigger.
– The popup will be opened **on map load**, even if it's slightly outside view (use `fitbounds` to adjust that).

—

### 🧩 Optional Tip: Auto-scroll to popup (advanced)
If the pre-opened marker is still out of view, you can:
– Use `fitbounds` to keep all markers in view
– OR center the map manually near that marker with `lat=… lng=… zoom=…`

—

Let me know if you’d like:
– All markers to open on load (requires custom JS)
– Popup to open on **hover instead of click**
– A dynamic shortcode to load addresses from database or ACF

Happy to help!

AI Chatbot Integration WP

Leave a Comment Cancel