ChatGPT Button Generator

Add a sleek, interactive "Ask ChatGPT" button to your website. Help your visitors discover what AI says about your brand.

Configure Widget

Strip whitespace and comments for a smaller code footprint.

Live Preview

Interactive
Your website content preview...
ChatGPT
Ask ChatGPT about usSee what it says.

Widget Implementation Code

<div id="chatgpt-callout-root"></div> <script> (function() {const config = {title: "Ask ChatGPT about us",subtitle: "See what it says.",url: "https://chatgpt.com/?prompt=Tell%20me%20about%20temso.ai",position: "bottom-right"};const css = `#chatgpt-callout-container {position: fixed;${config.position === 'bottom-right' ? 'bottom: 24px; right: 24px;' : 'bottom: 24px; left: 24px;'}z-index: 9999;font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);}#chatgpt-callout-container.hidden {opacity: 0;transform: scale(0.9) translateY(20px);pointer-events: none;}.chatgpt-callout-link {display: flex;align-items: center;gap: 16px;background: #ffffff;border-radius: 9999px;padding: 8px 24px 8px 8px;text-decoration: none;box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);border: 1px solid #f4f4f5;color: #18181b;transition: all 0.3s ease;}.chatgpt-callout-link:hover {transform: translateY(-4px);box-shadow: 0 25px 30px -5px rgba(0, 0, 0, 0.15);}.chatgpt-icon-wrapper {width: 48px;height: 48px;border-radius: 9999px;background: #f9fafb;display: flex;align-items: center;justify-content: center;border: 1px solid rgba(244, 244, 245, 0.5);overflow: hidden;}.chatgpt-icon-wrapper img {width: 40px;height: 40px;object-fit: contain;}.chatgpt-text {display: flex;flex-direction: column;}.chatgpt-title {font-size: 14px;font-weight: 700;line-height: 1.2;}.chatgpt-subtitle {font-size: 12px;color: #71717a;line-height: 1.2;}.chatgpt-close {margin-left: 16px;padding: 4px;border-radius: 9999px;border: none;background: transparent;cursor: pointer;color: #a1a1aa;display: flex;align-items: center;justify-content: center;transition: all 0.2s;}.chatgpt-close:hover {background: #f4f4f5;color: #52525b;}`;const style = document.createElement('style');style.innerHTML = css;document.head.appendChild(style);const container = document.getElementById('chatgpt-callout-root');if (localStorage.getItem('chatgpt-callout-dismissed')) return;container.innerHTML = `<div id="chatgpt-callout-container"><a href="${config.url}" target="_blank" rel="noopener noreferrer" class="chatgpt-callout-link"><div class="chatgpt-icon-wrapper"><img src="https://assets.tina.io/9b8c5233-b998-42b0-a153-e8484e4a6cd2/powering_visibility_icons/KM6CyUHXk8vBenb0S9tATobvy0I.png" alt="ChatGPT" /></div><div class="chatgpt-text"><span class="chatgpt-title">${config.title}</span><span class="chatgpt-subtitle">${config.subtitle}</span></div><button class="chatgpt-close" id="chatgpt-close-btn" aria-label="Close"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button></a></div>`;document.getElementById('chatgpt-close-btn').addEventListener('click', (e) => {e.preventDefault();e.stopPropagation();document.getElementById('chatgpt-callout-container').classList.add('hidden');localStorage.setItem('chatgpt-callout-dismissed', 'true');});// Delay appearancesetTimeout(() => {const el = document.getElementById('chatgpt-callout-container');if (el) el.style.opacity = '1';}, 1000); })(); </script>
!

Copy this code and paste it just before the </body> tag of your website. No dependencies required.