(function () { document.head.insertAdjacentHTML('beforeend', ''); const style = document.createElement('style'); style.innerHTML = ` .hidden { display: none; } #chat-widget-container { position: fixed; bottom: 32px; left: 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/chatbot5.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: Call: +44 (0) 7490 373980 \nWhatsApp: 447490373980\nEmail address: devs@yourpcm.uk\nBook a demo: https://www.calendly.com/yourpcm/demo2\nOpening hours: 8am until 6pm on Weekdays\n\nHow do I get access? How do I get started? How do I sign up? How do I join?\nClick the gold button top right of your screen that says \'JOIN US AND GET 25 TOKENS FREE\' then fill out your contact details. We'll send your unique and private URL and login details by email. Then you can start using YourAI right away!\n\nWhen you sign up, you should receive an email from devs@yourpcm.uk to your inbox. As it's likely the first time you've heard from us you should check your junk folder or promotions tab to see if it was delivered there instead of your inbox.\n\nWhat if I can't find your sign-up email? What if I never received your sign-up email?\nDrop a message to devs@yourpcm.uk and we'll resend your login details as soon as we can. Failing that, give us a call at +44 (0) 7490 373980 and we'll get you sorted.\n\nDoes it cost anything to sign up? How much does it cost to join? Do I need a credit card to sign up?\nYourAI is free to join and does not require a credit card. We will give you 25 free tokens to play with and send you email reminders for the first few days. \n\nHow do I buy more tokens? What happens when I've used my 25 free tokens? How much do tokens cost?\nYou can purchase tokens as and when you need them. We use SquarePay to process your purchase and we never see your credit or debit card details. Tokens cost 10p each and we have packages from just £10 for 100 tokens through to £500 for 5,000 tokens. Just buy as many as you need when you need them.\n\nWhat does YourAI do? What are the features of YourAI?\nYourAI is a wrapper for ChatGPT and DALL-E which lets you quickly and easily create blog posts, words, images, audios, social media shares and AI-driven chatbots (like this one). It uses AI to quickly and easily create content for your business and then keep it all organised long-term.\n\nWhy should I use YourAI instead of ChatGPT or DALL-E directly?\nIf you want to use the latest OpenAI models then you need to pay a $20-a-month subscription. With YourAI, you're still using the latest Open AI models like ChatGPT4 and DALL-E3 but it uses a token-based system instead so you only pay when you actually create something. For business owners who don't use AI much, this is a better way of working.\n\nWhen are chatbots being released? Can I have a chatbot now? Are chatbots available yet?\nWe're just putting the finishing touches to our quick and easy chatbots and will release them to our users in just a few days. You're talking to one of them right now, so you can see how nearly finished they are.\n\nWho is behind YourAI? Who are the developers?\nThe development team at YourPCM Limited creates YourAI. YourAI was originally a module within YourPCM, but there was such a great demand for YourAI that the developers created a stand-alone version that anyone in the English-speaking world can use.\n\nWhat is YourPCM?\nYourPCM is a CRM designed exclusively for micro-business owners in the United Kingdom. If you want to discover more, visit https://www.yourpcm.uk\n\nWho owns YourAI? Who are the people behind YourAI? Who runs YourAI?\nYourAI was created by Steffi Lewis, a 30-year veteran web developer having created her first website for the Open University back in 1993. \n\nSteffi has worked in all sorts of development roles, from being self-employed to contracting to working in corporate and was even involved in the dotcom boom at the turn of the century.\n\nSteffi lives in a small village just north of Milton Keynes with her two cats and an aquarium full of unruly tropical fish. She is a brain aneurysm and cancer survivor, loves SciFi, burgers and walking in the local countryside to walk off her love of food.\n\nHow do I unsubscribe from your mailers? How do I unsubscribe from your mailing list?\nAll our mailers have an unsubscribe option at the very bottom of the message to keep us GDPR compliant. It's usually entitled 'click here' and is written in small characters and will be the last thing you see in the email. " }, { "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; } })();