> ## Documentation Index
> Fetch the complete documentation index at: https://docs.molin.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Open chat via URL

> Create links that open your chatbot with a prefilled message - no code required.

export const UrlPrefillBuilder = () => {
  const [shopUrl, setShopUrl] = useState('https://yourstore.com');
  const [message, setMessage] = useState('Hello! I have a question about your products');
  const [autoSend, setAutoSend] = useState(false);
  const [copied, setCopied] = useState(false);
  const buildUrl = () => {
    try {
      const url = new URL(shopUrl);
      url.searchParams.set('molin_message', message);
      if (autoSend) {
        url.searchParams.set('molin_autosend', '1');
      }
      return url.href;
    } catch {
      return '';
    }
  };
  const copyToClipboard = async () => {
    const url = buildUrl();
    if (url) {
      try {
        await navigator.clipboard.writeText(url);
        setCopied(true);
        setTimeout(() => setCopied(false), 2000);
      } catch {
        const textArea = document.createElement('textarea');
        textArea.value = url;
        document.body.appendChild(textArea);
        textArea.select();
        document.execCommand('copy');
        document.body.removeChild(textArea);
        setCopied(true);
        setTimeout(() => setCopied(false), 2000);
      }
    }
  };
  const generatedUrl = buildUrl();
  const isValidUrl = generatedUrl !== '';
  return <div className="my-5 rounded-2xl border border-gray-200 bg-gray-50 p-5 dark:border-gray-600 dark:bg-gray-800">
      <h4 className="mt-0 mb-4 text-lg font-semibold text-gray-800 dark:text-gray-200">URL Builder</h4>

      <div className="mb-4">
        <label htmlFor="shop-url-input" className="mb-1 block font-semibold text-gray-700 dark:text-gray-300">
          Your shop URL:
        </label>
        <input type="url" id="shop-url-input" placeholder="https://yourstore.com" value={shopUrl} onChange={e => setShopUrl(e.target.value)} className="w-full rounded-xl border border-gray-300 bg-white p-2.5 text-sm text-gray-900 focus:border-transparent focus:ring-1 focus:ring-[#601FEB] dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100" />
        <small className="text-gray-500 dark:text-gray-400">Include the full URL with https://</small>
      </div>

      <div className="mb-4">
        <label htmlFor="prefill-message-input" className="mb-1 block font-semibold text-gray-700 dark:text-gray-300">
          Message to prefill:
        </label>
        <textarea id="prefill-message-input" placeholder="Enter the message you want to prefill..." value={message} onChange={e => setMessage(e.target.value)} rows={3} className="w-full rounded-xl border border-gray-300 bg-white p-2.5 text-sm text-gray-900 focus:border-transparent focus:ring-1 focus:ring-[#601FEB] dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100" />
      </div>

      <div className="mb-4">
        <label className="flex cursor-pointer items-center">
          <input type="checkbox" checked={autoSend} onChange={e => setAutoSend(e.target.checked)} className="mr-3 h-4 w-4 rounded-md border-gray-300 bg-gray-100 text-[#601FEB] focus:ring-1 focus:ring-[#601FEB] dark:border-gray-500 dark:bg-gray-600" />
          <span className="font-semibold text-gray-700 dark:text-gray-300">Auto-send message</span>
        </label>
        <small className="ml-6 text-gray-500 dark:text-gray-400">When enabled, the message will be sent automatically (rate limited to 1 per minute)</small>
      </div>

      <div className="mb-4">
        <label className="mb-1 block font-semibold text-gray-700 dark:text-gray-300">Generated URL:</label>
        <div className="flex gap-2">
          <input type="text" readOnly value={generatedUrl} className={`flex-1 rounded-xl border p-2.5 text-sm ${isValidUrl ? 'border-gray-300 bg-white text-gray-900 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100' : 'border-red-300 bg-red-50 text-red-800 dark:border-red-600 dark:bg-red-900/20 dark:text-red-300'}`} placeholder={isValidUrl ? '' : 'Enter a valid shop URL above'} />
          <button onClick={copyToClipboard} disabled={!isValidUrl} className={`rounded-xl border-none px-4 py-2.5 font-semibold text-white transition-colors duration-200 ${isValidUrl ? copied ? 'bg-green-600 hover:bg-green-700' : 'cursor-pointer bg-[#601FEB] hover:bg-[#8624FF]' : 'cursor-not-allowed bg-gray-400'}`}>
            {copied ? 'Copied!' : 'Copy'}
          </button>
        </div>
      </div>

      {isValidUrl && <div className="rounded-xl border border-blue-200 bg-blue-50 p-3 text-sm text-blue-800 dark:border-blue-800 dark:bg-blue-900/20 dark:text-blue-300">
          <strong>Preview:</strong> When users visit this URL, the chat will open with your message {autoSend ? 'and send it automatically' : 'prefilled in the input field'}.
        </div>}
    </div>;
};

## Overview

You can open the chat with a prefilled message by adding URL parameters to any page on your website. This is perfect for:

* Marketing campaigns with pre-written questions
* Email links that open chat with context
* QR codes that start specific conversations
* Social media links with call-to-action messages
* Support links with predefined inquiries

<Note>This feature requires no JavaScript code. Just add parameters to your existing URLs.</Note>

## URL builder

Use this tool to generate URLs for your campaigns:

<UrlPrefillBuilder />

## Parameters

| Parameter        | Required | Description                                            |
| ---------------- | -------- | ------------------------------------------------------ |
| `molin_message`  | Yes      | The message to prefill in the chat input (URL-encoded) |
| `molin_autosend` | No       | Set to `1` to automatically send the message           |

## URL encoding

Special characters must be URL-encoded. Common encodings:

| Character | Encoded |
| --------- | ------- |
| Space     | `%20`   |
| `?`       | `%3F`   |
| `&`       | `%26`   |
| `=`       | `%3D`   |
| `!`       | `%21`   |
| `'`       | `%27`   |

<Tip>The URL builder above handles encoding automatically. For manual encoding, use JavaScript's `encodeURIComponent()` function.</Tip>

## Examples

### Product inquiry

Direct users to ask about a specific product:

```
https://yourstore.com/products/blue-sneakers?molin_message=Tell%20me%20more%20about%20these%20sneakers
```

### Support request

Create a support link in your email footer:

```
https://yourstore.com?molin_message=I%20need%20help%20with%20my%20order
```

### Campaign landing page

Add to marketing campaigns with a specific question:

```
https://yourstore.com/summer-sale?molin_message=What%20deals%20are%20available%20today%3F
```

### Order tracking

Link from order confirmation emails:

```
https://yourstore.com/account?molin_message=Where%20is%20my%20order%3F&molin_autosend=1
```

## Use cases

### Email marketing

Add prefilled chat links to your email campaigns:

```html theme={null}
<a href="https://yourstore.com?molin_message=I%20saw%20your%20email%20about%20the%20sale"> Chat with us about deals </a>
```

### QR codes

Generate QR codes that link to URLs with prefilled messages. When scanned, customers immediately start a relevant conversation.

### Social media ads

Use prefilled URLs in your ad campaigns to start targeted conversations:

* Facebook ads → product-specific questions
* Instagram bio → general inquiries
* Twitter links → support requests

### Website buttons

Create buttons that open chat with context:

```html theme={null}
<a href="?molin_message=I%20want%20to%20learn%20more">Ask a question</a>
```

<Tip>For more control over chat behavior, see [Send message programmatically](/home/general/send-message) for the JavaScript API.</Tip>

## Combining with existing URLs

The parameters work with any existing URL on your site:

```
# Homepage
https://yourstore.com?molin_message=Hello

# Product page
https://yourstore.com/products/item-123?molin_message=Is%20this%20in%20stock

# With existing parameters
https://yourstore.com/search?q=shoes&molin_message=Help%20me%20find%20shoes
```

## Technical notes

* Parameters are parsed when the widget script loads
* The chat opens automatically when a valid `molin_message` is detected
* After the chat opens, `molin_*` parameters are automatically removed from the URL (using `history.replaceState`) to keep URLs clean
* Works with all widget embed methods (script tag, Shopify app, etc.)