设置指南：网站集成

1. 开始之前

Pro 套餐。 房源小部件、住户按钮、现成按钮、二维码和数据源属于 RentMerchant Pro 功能。普通链接和您的免费 RentMerchant 页面在所有套餐中均可使用。请在账户的 账单与订阅 中升级。
已验证的电子邮箱地址。 房源和小部件仅在已验证的账户中加载。
网站编辑权限。 您需要能够在建站工具中添加页面元素。有些建站工具只在付费套餐中允许自定义代码；下方的建站工具步骤会说明具体位置。

2. 找到您的代码

在 app.rentmerchant.com 登录。
打开设置，然后点击集成标签页。
点击某个选项将其打开，然后使用其 复制代码 按钮。您的代码已包含您自己的账户名称，请原样粘贴。

在本页的示例中，your-name 代表您的账户名称。请务必从“集成”页面复制您的真实代码，而不要重新输入这些示例。

3. 添加您的出租房源

小部件会显示您列出的房屋。在您逐一开启之前，不会列出任何房屋。

打开房源（在“租赁”下）。您的所有房屋单元都在那里。没有房屋单元的房产会显示 创建房源 按钮。
点击某处房屋的编辑，填写卧室数、卫生间数、平方英尺、月租、押金、可入住日期（留空表示“现在可入住”）、宠物政策和描述。
最多上传 12 张照片。第一张照片为封面；使用箭头调整顺序。每张照片的位置数据都会被自动移除。
勾选 公开发布此房源，然后点击 保存房源。

房屋出租后，在“房源”页面点击 取消发布。它会在五分钟内从您的网站上消失，无需修改任何代码。

每个房源还有自己的页面，包含照片库和 申请租住此房 按钮。申请表打开时已选好该房屋，申请会进入您的申请标签页。

以卡片形式显示您列出的房屋，包括照片、租金、卧室数、卫生间数和可入住情况。访客点击卡片即可打开房源页面。

方案 A：小部件代码（推荐）

自动适应页面宽度，并随房源数量自动扩展。将其粘贴到要显示房源的位置：

<div data-rentmerchant-listings="your-name"></div>
<script src="https://app.rentmerchant.com/embed/v1/listings.js" async></script>

方案 B：iframe

适用于不允许脚本的建站工具。它是一个固定高度的可滚动框：

<iframe src="https://app.rentmerchant.com/embed/listings/your-name" title="Available rentals"
        loading="lazy" style="width:100%;height:900px;border:0"></iframe>

如果您的建站工具允许在旁边添加脚本，请改用“集成”页面上的 自动调整尺寸的版本。它会添加一行代码，使框的高度与您的房源完全一致。

5. 悬浮住户按钮

在每个页面的底部角落添加一个住户按钮。点击后会打开一个小菜单：住户登录、交房租、提交维修请求、立即申请和可租房源（每项仅在适用于您的账户时显示）。只需在建站工具中为每个页面添加代码的区域粘贴一次（通常称为全站代码、页脚代码或代码注入）：

<script src="https://app.rentmerchant.com/embed/v1/resident-button.js" data-rentmerchant-site="your-name" async></script>

如果您的建站工具没有全站代码区域，请将其粘贴到每个需要显示按钮的页面上。

6. 按钮和链接

按钮： 在“集成”的“按钮”部分，勾选您想要的按钮，选择颜色，查看预览，然后复制代码。这些按钮是带样式的普通链接，因此适用于任何支持 HTML 的建站工具，包括电子邮件简报。

链接（所有套餐）：将任意链接复制到您网站的导航菜单、页脚、社交媒体资料或电子邮件签名中。在大多数建站工具中：打开菜单编辑器，添加一个链接项目，然后粘贴地址。

7. 二维码

在“二维码”部分，点击所需二维码下方的 下载 PNG。将其印在“招租”牌上（使用“可租房源”或“立即申请”）、洗衣房通知上（“交房租”或“维修”），或入住资料包中。打印宽度至少 2.5 厘米（1 英寸），批量打印前请先用自己的手机扫描测试。

8. 针对您的建站工具的分步说明

建站工具会不时调整菜单。如果下方的标签不完全一致，请查找名为 HTML、Embed 或 Code 的元素。

Wix

房源或按钮： 在编辑器中，点击 添加元素 (+)（Add Elements），然后点击 嵌入代码（Embed Code），再点击 嵌入 HTML（Embed HTML）。选择代码，粘贴，然后点击 更新（Update）。将方框拖动到您想要的大小。
住户按钮： 进入网站的设置，然后点击 自定义代码（Custom Code）（在“高级”下），点击 添加自定义代码（Add Custom Code），粘贴，选择 所有页面（All pages） 和 Body 末尾（Body, end）。Wix 仅在已连接域名且为付费套餐的网站上提供自定义代码功能。
发布您的网站。

Squarespace

房源或按钮： 编辑页面，点击一个插入点，选择代码，粘贴，并确保 显示源代码（Display Source） 处于关闭状态。
住户按钮： 打开设置，然后点击 开发者工具（Developer Tools）（或 高级（Advanced）），再点击 代码注入（Code Injection），然后粘贴到 页脚（Footer） 中。
代码区块和代码注入中的脚本需要包含自定义代码功能的 Squarespace 套餐。如果小部件代码无法运行，请改用 iframe 选项。

WordPress

房源或按钮： 编辑页面，点击 +，添加一个 自定义 HTML（Custom HTML） 区块，粘贴，然后更新页面。
住户按钮： 如果您的主题有页脚代码设置，请使用该设置；否则使用页眉页脚代码插件（例如 WPCode），然后粘贴到页脚中。
在 WordPress.com（托管服务）上，脚本仅在允许插件和自定义代码的套餐中有效。在其他套餐中，请使用 iframe 选项和按钮。

GoDaddy Websites + Marketing

编辑您的网站，点击 添加区块（Add Section），搜索 HTML，然后添加。
将代码粘贴到该区块的自定义代码框中，然后点击完成。在这里，iframe 选项最为可靠。
对于住户按钮，请在网站的设置中查找全站代码。如果您的套餐没有此功能，请改为将按钮添加到各个页面。

Weebly (Square Online classic)

房源或按钮： 将一个 嵌入代码（Embed Code） 元素拖到页面上，点击它，选择 编辑自定义 HTML（Edit Custom HTML），然后粘贴。
住户按钮： 依次点击设置、SEO，然后粘贴到 页脚代码（Footer Code） 中。

Webflow

房源或按钮： 将一个 代码嵌入（Code Embed） 元素拖到页面上，然后粘贴。
住户按钮： 依次点击 网站设置（Site settings）、自定义代码，然后粘贴到 页脚代码 中。发布。
Webflow 需要付费网站套餐才能使用自定义代码。

定制或手工搭建的网站

将小部件代码粘贴到要显示房源的位置，将住户按钮粘贴到结束 </body> 标签之前。或者使用 JSON 数据源打造您自己的设计。

9. 选项参考

属性	适用于	功能说明
data-limit="3"	房源小组件	只显示前几处房屋（最早可入住的排在前面）。
data-accent="#0f766e"	房源小部件、住户按钮	您自己的颜色，使用六位十六进制代码。默认为 RentMerchant 靛蓝色。
data-position="left"	住户按钮	将按钮放在左下角，而不是右下角。
data-label="Tenants"	住户按钮	更改按钮文字（最多 24 个字符）。
?accent=0f766e	Iframe 地址	iframe 版本的颜色，添加在其地址末尾。

示例，一个以青绿色显示三处房屋的小部件：

<div data-rentmerchant-listings="your-name" data-limit="3" data-accent="#0f766e"></div>
<script src="https://app.rentmerchant.com/embed/v1/listings.js" async></script>

10. 面向网站开发人员：JSON 数据源

两个公开的只读数据源提供与小部件相同的数据。无需密钥，允许跨域请求，响应缓存五分钟。

GET https://app.rentmerchant.com/r/your-name/listings.json
GET https://app.rentmerchant.com/r/your-name/links.json

listings 中的每个项目包括：

{
  "id": 476,
  "title": "Capitol Flats · Unit 102",
  "city": "Columbus, OH",
  "rent": "$1,950/mo",          "rent_amount": 1950,
  "deposit": "$1,950",
  "facts": ["2 bed", "1 bath", "880 sq ft"],
  "bedrooms": 2, "bathrooms": 1, "square_feet": 880,
  "available": "Available now", "available_on": null,
  "pets": "Cats OK",
  "description": "Bright corner two bedroom...",
  "photos": [{ "url": "...", "thumb": "...", "w": 2000, "h": 1500 }],
  "url": "https://app.rentmerchant.com/r/your-name/listings/476",
  "apply_url": "https://app.rentmerchant.com/apply/...?unit=476"
}

请按原样显示文字，并链接到 url 和 apply_url，而不要自行制作申请表。完整街道地址只显示在房源页面上，不包含在数据源中。links.json 返回您的名称、强调色和住户链接（key、label、url）。

11. 故障排除

小部件区域是空白的。: 您的建站工具可能会删除脚本；请使用 iframe 选项。还请检查您的账户是否为 Pro、电子邮箱是否已验证，以及代码是否完整粘贴。
显示没有可租房屋。: 在您的账户中打开“房源”，确保至少有一处房屋被勾选为已列出。更改会在五分钟内生效。
在编辑器里看起来正常，但在正式网站上却不显示。: 大多数建站工具只在已发布的网站上运行脚本，而不在编辑器预览中运行。请先发布，再查看正式网址。
iframe 显示不全或出现滚动条。: 使用自动调整尺寸的版本，或调高 iframe 代码中的 height 值。
住户按钮没有显示。: 它必须放在全站代码区域或页面本身中，并且只会在已发布的网站上显示。如果您的账户没有可显示的链接，它会保持隐藏。
其他？: 在您的账户中打开 客服支持，告诉我们您的网站地址和建站工具。我们会帮您查看。

12. 安全与隐私

付款和登录始终在 RentMerchant 上打开。租客永远不会在您的网站上输入密码或银行信息。
小部件只会显示 RentMerchant 的链接和照片，并与页面的其他代码和样式相互隔离。
只有您列出的房屋才会公开。取消列出某处房屋，会立即将其从所有地方移除。
您上传的每张照片都会移除位置数据和其他隐藏信息。
如果账户被关闭、暂停或退出 Pro，其房源和小部件会自动停止显示。

准备好连接您的网站了吗？

登录并打开“集成”，或先看看房源小部件的实际效果。

打开“集成” 观看在线演示

网站集成