Connecting a v0 Website to Propstack, onOffice and Your CRM Software

PLUS With v0 by Vercel, you describe your property website in a chat and v0 builds a Next.js project for it, which you publish with Vercel. WP-ImmoMakler supplies the properties from your CRM software, for example from Propstack, onOffice, FlowFact, JustImmo, ImmobilienScout24 (ImmoScout24) or any software with an OpenImmo export, through a REST API. It accepts contact enquiries from your v0 website and forwards them to your contact persons and, depending on your setup, to your CRM software.

Why this route runs through WordPress and not directly to the API of your CRM software is explained under Connecting an AI website to your CRM software.

Requirements

WP-ImmoMakler PLUS or higher, connected to your CRM software
The headless interface enabled: in the back end of your website (wp-admin) under WP-ImmoMakler → Integrations → Headless, see Setup
An account with v0

Connecting an existing website

If you have already created your website with v0, usually only the connection to your properties is missing. Your website does not have to be rebuilt for this: the following prompt replaces the sample data with the properties from WP-ImmoMakler, connects the contact form and leaves the design and structure unchanged. Copy it into the chat of your v0 project and replace https://your-wordpress-address.com with the address of your WordPress website.

My website already shows properties, but still with sample data. Connect it to the WP-ImmoMakler property API, which is described here:
https://your-wordpress-address.com/wp-json/immomakler-headless/v1/llms-full.txt
Read this description completely first.

The design, layout and components of my website stay unchanged. Replace only the data source. If a property list or detail page is missing, create it in the style of the existing pages.

Property list:
- Load the properties via GET /search with fields=summary instead of from the sample data.
- Paginate using page and total_pages from the response instead of loading all properties at once.
- If my website has filters (property type, marketing type, location, price, rooms, area), build them from GET /site (search.taxonomies, search.ranges, search.orders) and pass them to /search as search parameters. Restore the state of the filters from "applied" in the response and keep it in the URL so that a filtered list stays linkable.
- Show a loading state, an error message and a notice when no property matches.

Detail page:
- Use the normalised object number (object_number_normalized) in the URL of the detail page and load the property with it via GET /properties/{object_number_normalized}. Never use post_id as an identifier, it changes with every import.
- Link from the list to the path from links.frontend_url and align the route of the detail page with it.
- If the API responds with 404, show a dedicated "Property not found" page.

Contact form:
- If my website has a contact form, connect it to POST /enquiries: with the fields and consents from site.forms.enquiry, a token that the form fetches via GET /spam/token when it is displayed, and the object number (object_number) of the property under "properties".
- Show the errors from data.errors of the response on the affected fields.

Displaying data:
- Replace every field of the sample data with the matching field of the API. Show numbers, prices and areas with "label" and "value" from the API, do not format "raw" yourself.
- Show the data fields in the order in which the API delivers them (fields.property, fields.areas, fields.prices, fields.epass, in the list archive and archive_prices), and leave out fields that a property does not have. Do not invent values and do not keep sample data as a substitute.
- Images from media.featured and media.images, each in the matching size from "sizes", with the alternative text from "alt".
- Description texts from descriptions as HTML.
- Address from address. If geo.exact is false, show an area instead of a point on the map.
- Contact person from contact.
- Page title and meta description from seo, the structured data from json_ld as <script type="application/ld+json">.

Afterwards, remove the sample data from the project.

Creating a new website

Only start with v0 now, copy the following prompt into it and replace https://your-wordpress-address.com with the address of your WordPress website. Describe the design, page structure and texts in your own words before or after it.

Create a website for my estate agency with a property list, a detail page for each property and a contact form. The properties come from the WP-ImmoMakler property API, which is described here:
https://your-wordpress-address.com/wp-json/immomakler-headless/v1/llms-full.txt
Read this description completely first.

- Take the name, logo, colours and menus from GET /site.
- Load the property list via GET /search with fields=summary, using the filters from site.search, and page through it with page and total_pages. Keep the filters in the URL.
- Create the detail page under the normalised object number (object_number_normalized) and load the property via GET /properties/{object_number_normalized}. Link to it from the list using the path from links.frontend_url. Never use post_id as an identifier.
- Show the data fields with "label" and "value" in the order in which the API returns them, and omit missing fields. Show images from media in the matching size from "sizes" with the alternative text from "alt", description texts from descriptions as HTML, and the contact person from contact.
- If geo.exact is false, show an area on the map instead of a point.
- Page title and meta description from seo, structured data from json_ld as <script type="application/ld+json">.
- The contact form has the fields from site.forms.enquiry, fetches a token via GET /spam/token when it is displayed and submits to POST /enquiries.
- Load the property data in Server Components so that every page is delivered with its content.

The last point makes sure that search engines find the properties in the delivered HTML, see below.

Allowed origins for the contact form

The contact form only submits from addresses that WP-ImmoMakler knows. In the headless settings under “Address of your front end”, enter the published address of your v0 website. If the form should also work in v0’s preview, additionally enter its address under “Allowed origins”. The field does not accept wildcards such as *; each address is entered individually.

Using the API key

As long as you do not require the API key for read requests, your v0 website needs no key: the property data is public, as on your WordPress website.

If you require the key, store it in the environment variables of your project at Vercel, for example as IMMOMAKLER_API_KEY, without the prefix NEXT_PUBLIC_: variables with this prefix end up in the code that the browser loads. Add this to the prompt:

The API requires an API key in the header X-ImmoMakler-Key. Read it from the environment variable IMMOMAKLER_API_KEY and call the API only in Server Components or Route Handlers.

See Environment Variables in the Next.js documentation.

You will find the API key in the back end of your website (wp-admin) under WP-ImmoMakler → Integrations → Headless in the “Access credentials” section. Never write it into the prompt or into the code of the website.

Publishing and search engines

Next.js generates pages whose data is loaded in Server Components on the server. Search engines and AI crawlers therefore receive every property with title, description and structured data in the HTML. If a page only loads its data in the browser, ask v0 to switch it to Server Components.

So that links in e-mails and the redirect from WordPress point to your v0 website, adjust “Path of a property” and “Path of the property list” in the headless settings to its addresses, for example /{archive_slug}/{object_number_normalized}/.