Crisp Chat — Интеграция контактной формы менее чем за 5 минут

У меня всегда были контактные формы на моем веб-сайте, я думаю, что люди ожидают их, но управление ими всегда было проблемой. Вы получаете отформатированное электронное письмо, которое также выглядит некрасиво, когда на него отвечают, адрес для ответа неверен и обычно выходит за рамки вашего обычного процесса обслуживания клиентов.

На этот раз я решил вставить информацию из контактной формы прямо в наш виджет чата Crisp.

Сначала мне нужно было создать простую форму.

Пример без стилей…

<form id="contactForm">
    <input name="firstname" type="text" id="firstname">
    <input name="lastname" type="text" id="lastname">
    <input name="email" type="email" id="email">
    <input name="phone" type="text" id="phone">
    <textarea required="required" name="message" id="message">
    </textarea>
    <button type="submit">Submit</button>
</form>

Затем нам просто нужно перехватить отправку и отправить всю информацию в виджет чата Crisp.

<script>
    const contactForm = function (form) {
        form.preventDefault();
        $crisp.push(["do", "chat:open"])
        $crisp.push(["do", "message:send", ["text", 'Name: ' + this.firstname.value + ' ' + this.lastname.value]]);
        $crisp.push(["do", "message:send", ["text", 'Email: ' + this.email.value]]);
        $crisp.push(["do", "message:send", ["text", 'Phone: ' + this.phone.value]]);
        $crisp.push(["do", "message:send", ["text", 'Message: ' + this.message.value]]);
        this.reset();
    };
   document.getElementById('contactForm').addEventListener('submit', contactForm)
</script>

Это откроет чат и отправит всю эту информацию, чтобы ваша служба поддержки могла ответить.

Однако гораздо лучше, если вы можете указать поле email непосредственно в интеграции. Таким образом, если пользователь больше не находится на странице, он получит электронное письмо, если не сможет получить уведомление от виджета онлайн-чата.

Добавление электронной почты пользователя (и имени).

И проверка того, что он еще не установлен в вашем приложении.

if(!$crisp.get('user:email')){
    $crisp.push(["set", "user:email", this.email.value]);
}
if(!$crisp.get('user:nickname')){
    $crisp.push(["set", "user:nickname", this.firstname.value + ' ' + this.lastname.value]);
}

Вот так, простые вещи. Окончательный сценарий будет выглядеть так, как показано ниже.

<script>
    const contactForm = function (form) {
        form.preventDefault();
        if(!$crisp.get('user:email')){
            $crisp.push(["set", "user:email", this.email.value]);
        }
        if(!$crisp.get('user:nickname')){
            $crisp.push(["set", "user:nickname", this.firstname.value + ' ' + this.lastname.value]);
        }
        $crisp.push(["do", "chat:open"])
        $crisp.push(["do", "message:send", ["text", 'Name: ' + this.firstname.value + ' ' + this.lastname.value]]);
        $crisp.push(["do", "message:send", ["text", 'Email: ' + this.email.value]]);
        $crisp.push(["do", "message:send", ["text", 'Phone: ' + this.phone.value]]);
        $crisp.push(["do", "message:send", ["text", 'Message: ' + this.message.value]]);
        this.reset();
    };
    document.getElementById('contactForm').addEventListener('submit', contactForm)
</script>

Прежде чем приступить к работе, важно, чтобы у вас уже был скрипт, включающий виджет живого чата на вашу страницу, и чтобы он был над скриптом, который мы только что добавили.

Надеюсь, это поможет одному из вас с этими надоедливыми контактными формами.