(function () { document.head.insertAdjacentHTML('beforeend', ''); const style = document.createElement('style'); style.innerHTML = ` .hidden { display: none; } #chat-widget-container { position: fixed; bottom: 32px; right: 32px; flex-direction: column; z-index: 99; } .chatbot__arrow--left { border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-right: 6px solid #f0f0f0; } .chatbot__arrow { width: 0; height: 0; margin-top: 18px; } .chatbot__arrow--right { border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 6px solid #1a181e; } #chat-popup { height: 70vh; max-height: 70vh; transition: all 0.3s; overflow: hidden; position:relative; z-index: 99; } .content-loader { display: none; padding: 12px 20px; position: absolute; right: 25px; bottom: 100px; z-index: 99; } .typing-loader::after { content: "Thinking ..."; animation: typing 1s steps(1) infinite, blink .75s step-end infinite; font-size:10px; } @keyframes typing { from,to { width: 0; } 50% { width: 15px; } } @keyframes blink { 50% { color: transparent; } } @media (max-width: 768px) { #chat-popup { position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; max-height: 100%; border-radius: 0; } } .icon { width: 70px; height: 70px; background-image: url('https://www.yourai.uk/chatbot/chatbot1.png'); } `; document.head.appendChild(style); // Create container for chat widget const chatWidgetContainer = document.createElement('div'); chatWidgetContainer.id = 'chat-widget-container'; document.body.appendChild(chatWidgetContainer); chatWidgetContainer.innerHTML = `
`; // Add event listeners const chatInput = document.getElementById('chat-input'); const chatSubmit = document.getElementById('chat-submit'); const chatBubble = document.getElementById('chat-bubble'); const chatPopup = document.getElementById('chat-popup'); const chatMessages = document.getElementById('chat-messages'); const loader = document.querySelector('.content-loader'); const closePopup = document.getElementById('close-popup'); chatSubmit.addEventListener('click', function () { const message = chatInput.value.trim(); if (!message) return; chatMessages.scrollTop = chatMessages.scrollHeight; chatInput.value = ''; onUserRequest(message); }); chatInput.addEventListener('keyup', function (event) { if (event.key === 'Enter') { chatSubmit.click(); } }); chatBubble.addEventListener('click', function () { togglePopup(); }); closePopup.addEventListener('click', function () { togglePopup(); }); function togglePopup() { const chatPopup = document.getElementById('chat-popup'); chatPopup.classList.toggle('hidden'); if (!chatPopup.classList.contains('hidden')) { document.getElementById('chat-input').focus(); } } function highlightContactDetails(text) { // Email regex const emailRegex = /\b[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z|a-z]{2,}\b/g; // Phone number regex const phoneRegex = /(\b\+?1\s)?\(?\d{3}\)?[-.\s]?\d{3}[-.\s]?\d{4}\b/g; // Simples URL regex const urlRegex = /\b((http|https):\/\/)?[a-z0-9\.-]+\.[a-z]{2,}[^\s]*\b/g; // Replace and add mark tag for highlighting return text; } function onUserRequest(message) { // Display user message const messageElement = document.createElement('div'); messageElement.className = 'flex justify-end mb-3'; messageElement.innerHTML = `
${message}
`; chatMessages.appendChild(messageElement); chatMessages.scrollTop = chatMessages.scrollHeight; chatInput.value = ''; // Reply to the user let url = "https://api.openai.com/v1/chat/completions"; let OPENAI_API_KEY = "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"; let headers = { "Content-Type": "application/json", "Authorization": `Bearer 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` }; let body = { "model": "gpt-3.5-turbo-16k", "messages": [ { "role": "system", "content": "You are a friendly chatbot that responds only to the questions and answers given in this prompt. If you are asked any questions not given in this prompt, apologize and say you can't answer. Format your response using HTML so that links will be active in a javascript environment. Use a friendly tone, use Pound Sterling as the currency, and use british english spelling. Questions and answers: Podds Print & Signage we are a commercial printer\n26-32 Godstone Rd, Warlingham, Whyteleafe CR3 0EA\nWe open 9am-5pm, Monday to Friday\nContact us at sales@poddsprint.com or by calling +44 (0) 208 668 0044\n\nOur Company was founded in 1950 by Charles Podd as traditional jobbing printers, serving a wide range of local professions and trades in the South London area.\nIn 1962 the business relocated to our premises in Whyteleafe and Charles was joined by his son David. Together they worked to create a solid client base, investing in many new and creative production facilities providing high quality printing and services to many sectors of the business community, both locally and nationally. Today the business continues to invest in the latest technology enabling us to produce an extensive range of products. Now trading as Poddsprint we remain a family run company, housed in our own purpose built factory. David is the Managing Director together with his sons Michael, Richard and Matthew as owners and Directors.\n\n\nAll our products are printed and finished in our factory in Whyteleafe, so we can make sure your job is looked after and on time. We also create artwork and designs in our studio.\n\nDigital & Litho Printing\nBusiness cards\nLetterheads\nCompliment slips\nBrochures\nCatalogues\nLeaflets\nProspectus\nNCR sets and pads\nSales cards\nWedding Stationery\nGreeting cards\nCalendars\nFolders\nOrder of service\nPerfect Bound Books\nThermography Printing\n\nWide Format\nPosters\nLarge banners\nVehicle signage\nShop signage\nPavement signs\nExhibition panels\nPop Up stands\nStickers\nLabels\nVinyl cutting\n\nFinishing\nFoiling\nEmbossing\nDebossing\nLaminating\nShrink wrapping\nCutting\nCreasing\nKiss cutting\nDuplexing\nWiro-binding\nDirect mailing service\nPerfect Binding\n\nWe do Pantone and CMYK printing,hot foiling, business stationary, banner and poster printing\n\nWe do wedding stationary.\nWe offer comprehensive selections of designs from all of the catalogues in the Collisons collection. These elegant and beautifully produced books show actual printed products so that you can see exactly how your stationery will look in real life. These can be viewed at our office by appointment, just call or e-mail us to arrange.\nWe also offer a bespoke service; our graphic designer will work with you to create unique personalised products for your special day.\nA tight budget? No problem, we can provide an economic solution to suit your pocket.\nFor a free estimate just go to our contact page to enquire.\nOur range includes:\n• Save the Date\n• Day Invitations\n• Evening Invitations\n• R.S.V.P.\n• Order of Service\n• Place cards\n• Table Plan\n• Table Numbers / Names\n• Thank you cards\n" }, { "role": "user", "content": message } ], "temperature": 1, "max_tokens": 13906, "top_p": 1, "frequency_penalty": 0, "presence_penalty": 0 }; loader.style.display = 'inline-block'; fetch(url, { method: 'POST', headers: headers, body: JSON.stringify(body) }) .then(response => response.json()) .then(data => { loader.style.display = 'none'; reply(data['choices'][0]['message']['content'].replace('Answer:', '')) }) // Logs the response data from the API to the console .catch(error => console.error('Error:', error)); } function reply(message) { const chatMessages = document.getElementById('chat-messages'); const replyElement = document.createElement('div'); replyElement.className = 'flex mb-3'; replyElement.innerHTML = `
${highlightContactDetails(message)}
`; chatMessages.appendChild(replyElement); chatMessages.scrollTop = chatMessages.scrollHeight; } })();