Bir Düğmeye Tıklandığında Widget'ın Başlatılması

Şu tarihte değiştirildi Cum, 26 Ock şunda: 4:15 AM

Freshdesk yardım widget'ını kullanarak web sitenize veya ürününüze çözüm makaleleri ve bir iletişim formu yerleştirebilirsiniz. Müşterileriniz yardıma ihtiyaç duyduğunda çözüm makalelerinde arama yapmak veya destek bildirimi göndermek için widget'ı açabilirler. Yardım widget'ını nasıl kuracağınızı öğrenmek için bu videoyu izleyebilir veya yardım widget'ını ayarlama hakkında daha fazla bilgiyi buradan okuyabilirsiniz .

Ayrıca, müşterileriniz web sitenizdeki veya ürününüzdeki "Yardım için burayı tıklayın" gibi bir düğmeyi tıkladığında widget'ın açılmasını da sağlayabilirsiniz. Bu çözüm makalesi, widget'ı açabilecek bir düğme ayarlama sürecinde size yol gösterecektir.

İşte bunun uygulandığı örnek bir site:

1. Düğme oluşturma

Öncelikle müşterilerinizin widget'ı açmak için hangi düğmeye tıklamaları gerektiğine karar verin. Henüz bir düğmeniz yoksa, önce bir tane oluşturmanız gerekir.

Bir düğme için örnek kod:

 This is a button

HTML

Bu arada bunun bir düğme olması gerekmiyor. Tercihiniz buysa, bağlantı gibi başka herhangi bir öğeyi de kullanabilirsiniz.

2. Widget'ı açan bir fonksiyon oluşturmak

Artık bir düğme oluşturduğunuza göre devam edebilir ve ne olması gerektiğini tanımlayabilirsiniz. Bunu yapmak için bir JavaScript işlevini kullanabilirsiniz .

JavaScript işlevi, belirli bir eylemi veya adımları tamamlamak için kullanılan bir kod parçasıdır.

Aşağıdaki örnek kodda openWidget() adında bir işlev tanımladık. openWidget() işlevi, widget'a widget API'sini kullanarak açılmasını söyler : FreshworksWidget('open');

Fonksiyonun adı yalnızca referans amaçlıdır ve dilediğiniz gibi değiştirilebilir.

openWidget() işlevi için örnek kod:

HTML

Bu işlevi yerleştirme kodunun (Freshdesk'ten kopyaladığınız) üstüne ve

3. Düğmeye tıklandığında widget'ın açılması

Şu ana kadar iki şey yaptık:

sayfada bir düğme oluşturdum
widget'ı açan bir işlev yarattı

Yapmamız gereken bir sonraki şey, müşterileriniz butona tıkladığında fonksiyonu çalıştırmaktır. Bunu yapmak için onclick'i kullanabilirsiniz.

Kullanıcı bir öğeye (düğme gibi) tıkladığında onclick olayını kullanarak bir işlevi çalıştırabiliriz.

onclick etkinliğine sahip bir düğme için örnek kod:


Widget'ı açmak için bu düğmeye tıklayın

İşte nasıl olduğuna dair bir örnek

İşte bunun uygulandığı örnek bir sayfa.

4. Widget'ı gizleme

Ayrıca, müşterilerinizin yardım istemek için bir düğmeye tıklayana kadar görmemesi için widget'ı da gizleyebilirsiniz. Bunun için gizleme widget'ı API'sini kullanacağız : FreshworksWidget('hide', 'launcher');

Sayfa yüklendiğinde gizleme widget'ı API'sini çağırabilirsiniz. Bu şekilde widget, başlatıcıyla birlikte müşterileriniz için varsayılan olarak gizlenir. Widget yalnızca düğmeye tıklandığında açılacaktır.

Gövde etiketinde yer alan gizleme widget'ı API kodu örneği

Burada widget'ı gizle API'sinin ve açık widget API'sinin uygulandığı örnek bir sayfa verilmiştir:

Müşterileriniz bir düğmeye tıkladığında widget açıldığında başlatıcıyı göstermeyi tercih ederseniz, widget'ı gizlerken 'başlatıcı' parametresini kaldırabilirsiniz: FreshworksWidget('hide')

Başlatıcı parametresi olmadan gövde etiketinde widget'ı gizle API'sini kullanma örneği