# Landing Page Chat Bot for Click-to-call

Retreaver has released a chat bot you can use on your landing pages, where a visitor is prompted with a series of questions and results in a click-to-call Retreaver number. This is integrated with our existing [Retreaver.js](https://learn.retreaver.com/guides/how-to-use-retreaver-js) library to dynamically insert phone numbers and track call data.

You can see a **live demo** here: [https://retreaver.github.io/landing-page-chat-bot/](https://retreaver.github.io/landing-page-chat-bot/)

Visitors are asked a customizable set of questions:

![CleanShot 2026 08 27 at 09.33.11@2x](/media/30/30c23e7ae8622ab31f94aeae0a496b6763d7e5c6c33aeb8089f8bed6bb18cc83.png)

Answers collected during the chat are **automatically attached **to the dynamic phone number as Retreaver tags, so they arrive with the call:

![CleanShot 2026 08 27 at 09.35.40@2x](/media/27/272bd5c283222a989906b3092c2cb24652fd49c1c730b3055ec2fb058d8b9ace.png)

With this data in Retreaver you then route calls to the best destination, track your leads, and using all of Retreaver's existing features to maximize your marketing campaigns.

## How to use the Chat Bot on your website

Our chat bot was published open source on Github:

[https://github.com/retreaver/landing-page-chat-bot](https://github.com/retreaver/landing-page-chat-bot)

### Customizing your page

Our chat bot library allows you to customize:

- Headline, badge, agent name/status, footer, and legal links live in index.html.
- The spots you are expected to edit — the agent name ("Alex is Online.") and the header text — are marked with the customizable class in index.html;
- Avatars are simple SVGs in assets/img/ — swap agent.png and profile.png for your own images.
- The favicon (browser tab icon) is the <link rel="icon"> tag at the top of index.html, currently pointing at the agent avatar — point it at your own SVG, PNG or ICO file.
- The chat bot itself is styled entirely in styles.css through a handful of .chat-* selectors — edit that file to restyle your bot with plain CSS.

Everything is fully customizable with javascript:

```javascript
function chatBot(step, value) {
    if (step == 'intro') {
        ChatBot.moveAgentToStep('firstQuestion');
    } else if (step == 'firstQuestion') {
        ChatBot.setTag('age_range', value);   // attach the answer to the call
        ChatBot.moveAgentToStep('secondQuestion');
    }
    // ...
}
```

See the README guide on [Github](https://github.com/retreaver/landing-page-chat-bot) for more information or reach out to our [support](https://learn.retreaver.com/tickets/new) for more information.