Install on your website

Before you copy any code

Open your chatbot’s Install & test tab. Always copy the actual snippets shown there—they include your chatbot’s unique identifier. The examples below use YOUR_BOT_SLUG and are not ready to paste unchanged.

Use snippets pointing to the published RankChat address when installing on a live customer site. A preview address is for testing, not a permanent installation.

Your website must allow custom HTML or scripts. On WordPress, Shopify, Webflow, Wix or another builder, use its custom-code area or ask your site administrator. Some plans restrict scripts, and some HTML editors remove script tags.

Floating chat bubble

1. Copy the code under 1. Add the chat widget.
2. Paste it just before the closing </body> tag, or in your website builder’s site-wide footer code area.
3. Publish your website, open it in a fresh tab, and click the launcher.
4. Ask a business-specific question and check the answer.

<script src="https://rankchat.io/widget.js" data-bot="YOUR_BOT_SLUG" defer></script>

Good to know. Install once per page. Appearance settings control the launcher look and corner position.

Inline Ask box

1. Copy the snippet under 2a. Add an Ask box.
2. Place it in a custom HTML section where you want visitors to type a question.
3. Publish and submit a question. Its answer appears below the field.

<div data-rankchat-ask="YOUR_BOT_SLUG" data-title="Ask us anything"></div>
<script src="https://rankchat.io/ask-embed.js" defer></script>

Good to know. The Ask box uses the same chatbot knowledge and message allowance as the floating chat. Its questions can create FAQ drafts.

Live FAQ embed

1. Approve some FAQ answers first.
2. Under 2. Put FAQs on your site, choose Live embed. Optionally select a topic.
3. Copy the snippet into the page’s custom HTML area and publish.
4. Open the page and expand an answer. New approved content appears on later loads; cached results can take a few minutes to update.

<div data-rankchat-faq="YOUR_BOT_SLUG"></div>
<script src="https://rankchat.io/faq-embed.js" defer></script>

Static FAQ HTML

1. Under 2. Put FAQs on your site, choose Copy HTML (best for SEO). Select a topic if needed.
2. Copy the entire HTML, including its styles and structured-data script, to the page’s HTML editor.
3. Publish and verify that the questions and answers appear in the page.
4. Whenever answers or themes change, copy fresh HTML and replace the previous version.

Good to know. Static HTML puts readable answers directly in your page. Live embeds depend on JavaScript, which some crawlers do not execute. Do not add both versions of the same FAQ list to one page. Your editor may remove styles or structured-data scripts; check its restrictions.

Check the finished page

1. Use a fresh browser tab and a phone-sized screen.
2. Confirm the chat launcher does not cover important buttons, and the Ask field and FAQ questions fit.
3. Send a test question and review the conversation and FAQ queue in RankChat.
4. For FAQs, verify that only approved answers appear and links point to the right business.