Təqvim: Veb saytınıza və ya WordPress saytınıza planlaşdırma pop-up və ya daxil edilmiş təqvimi necə yerləşdirmək olar

Təqvimlə Planlaşdırma Vidceti

Bir neçə həftə əvvəl mən bir saytda idim və onlarla görüş təyin etmək üçün keçidə kliklədiyim zaman qeyd etdim ki, təyinat saytına gətirilməmişəm. Gündəmdə planlaşdırıcı birbaşa açılan pəncərədə. Bu əla vasitədir... kimisə saytınızda saxlamaq onu xarici səhifəyə yönləndirməkdən daha yaxşı təcrübədir.

Calendly nədir?

Gündəmdə ilə birbaşa inteqrasiya edir Google İş sahəsi həm gözəl, həm də istifadəsi asan olan planlaşdırma formaları yaratmaq üçün və ya digər təqvim sistemi. Ən yaxşısı, hətta təqviminizdə kiminsə sizinlə əlaqə saxlamasına icazə verdiyiniz vaxtı məhdudlaşdıra bilərsiniz. Nümunə olaraq, xarici görüşlər üçün xüsusi günlərdə tez-tez bir neçə saatım olur.

Bunun kimi bir planlaşdırıcıdan istifadə etmək həm də formanı doldurmaqdan daha yaxşı təcrübədir. Mənim üçün rəqəmsal transformasiya konsaltinq şirkəti, liderlik qrupunun görüşdə olduğu qrup satış tədbirlərimiz var. Biz həmçinin veb görüş platformamızı Calendly-ə inteqrasiya edirik ki, təqvim dəvətnamələrinə bütün onlayn görüş bağlantıları daxil olsun.

Calendly, planlaşdırma formasını birbaşa səhifəyə, düymədən və ya hətta saytınızın altbilgisindəki üzən düymədən daxil etməkdə əla iş görən vidcet skripti və üslub cədvəlini işə saldı. Calendly üçün skript yaxşı yazılmışdır, lakin onu saytınıza inteqrasiya etmək üçün sənədlər heç də yaxşı deyil. Əslində, Calendly-nin hələ də müxtəlif platformalar üçün öz plaginlərini və ya proqramlarını dərc etməməsinə təəccüblənirəm.

Bu inanılmaz faydalıdır. Ev xidmətlərində olsanız və müştərilərinizə görüşlərini planlaşdırmaq üçün bir vasitə təmin etmək istəsəniz, it gəzdiricisi, ziyarətçilərin demo planlaşdırmasını istəyən SaaS şirkəti və ya asanlıqla planlaşdırmağınız lazım olan çoxsaylı üzvləri olan böyük bir korporasiya... Calendly və yerləşdirmə vidcetləri əla özünəxidmət vasitəsidir.

Kalendlyi Saytınıza Necə Yerləşdirmək olar

Qəribədir ki, siz yalnız bu yerləşdirmədə istiqamətləri tapa bilərsiniz Tədbir növü səviyyəsi və Calendly hesabınızdakı faktiki hadisə səviyyəsi deyil. Siz kodu yuxarı sağdakı hadisə növünün parametrləri üçün açılan menyuda tapa bilərsiniz.

təqvimlə daxil edin

Bunu kliklədikdən sonra yerləşdirmə növləri üçün seçimləri görəcəksiniz:

popup mətni yerləşdirin

Kodu götürüb saytınızda istədiyiniz yerə yerləşdirsəniz, bir neçə problem yaranacaq.

  • Əgər bir səhifədə bir neçə fərqli vidcetə zəng etmək istəyirsinizsə… bəlkə də planlaşdırıcını işə salan bir düyməyə (Popup Mətn) və həmçinin altbilgi düyməsinə (Popup Widget) sahib ola bilərsiniz... siz üslub cədvəlini əlavə edəcək və bir neçə skript hazırlayacaqsınız. dəfə. Bu lazımsızdır.
  • Saytınızda xarici skript və üslub cədvəli faylına zəng etmək, xidmətin saytınıza əlavə edilməsi üçün ən optimal vasitə deyil.

Tövsiyəm, üslub cədvəlini və Javascript-i başlığınıza yükləməkdir... sonra saytınızda məna kəsb edən digər vidcetlərdən istifadə edin.

Kalendlinin vidjetləri necə işləyir

Gündəmdə saytınıza daxil etmək üçün lazım olan iki fayl var, üslub cədvəli və javascript. Əgər bunları saytınıza daxil etmək niyyətindəsinizsə, HTML-nin baş hissəsinə aşağıdakıları əlavə edərdim:

<link href="https://calendly.com/assets/external/widget.css" rel="stylesheet">
<script src="https://calendly.com/assets/external/widget.js" type="text/javascript"></script>

Bununla belə, əgər WordPress-dəsinizsə, ən yaxşı təcrübə sizin functions.php WordPress-in ən yaxşı təcrübələrindən istifadə edərək skriptləri daxil etmək üçün fayl. Beləliklə, uşaq mövzumda üslub cədvəlini və skripti yükləmək üçün aşağıdakı kod sətirlərim var:

wp_enqueue_script('calendly-script', '//assets.calendly.com/assets/external/widget.js', array(), null, true);
wp_enqueue_style('calendly-style', '//assets.calendly.com/assets/external/widget.css' );

Bu, bütün saytımda bunları yükləyəcək (və onları önbelleğe alacaq). İndi mən vidjetləri istədiyim yerdə istifadə edə bilərəm.

Kalendlinin Altbilgi Düyməsi

Saytımdakı hadisə növünə deyil, konkret hadisəyə zəng etmək istəyirəm, ona görə də altbilgimə aşağıdakı skripti yükləyirəm:

<script type="text/javascript">window.onload = function() { Calendly.initBadgeWidget({ url: 'https://calendly.com/highbridge-team/sales', text: 'Schedule a Consultation', color: '#0069ff', textColor: '#ffffff', branding: false }); }</script>

Sizi görəcəksiniz Gündəmdə skript aşağıdakı kimi parçalanır:

  • URL – widgetıma yükləmək istədiyim dəqiq hadisə.
  • Mətn – düymənin olmasını istədiyim mətn.
  • rəng – düymənin fon rəngi.
  • mətn Rəngi - mətnin rəngi.
  • dağlama – Calendly brendinin silinməsi.

Calendly'nin Mətn Popup

Mən də bunun link və ya düymədən istifadə edərək bütün saytımda olmasını istəyirəm. Bunu etmək üçün siz öz proqramınızda onClick hadisəsindən istifadə edirsiniz Gündəmdə anker mətni. Minedə onu düymə kimi göstərmək üçün əlavə siniflər var (aşağıdakı nümunədə görünmür):

<a href="#" onclick="Calendly.initPopupWidget({url: 'https://calendly.com/highbridge-team/sales'});return false;">Schedule time with us</a>

Bu mesaj bir səhifədə birdən çox təklif üçün istifadə edilə bilər. Ola bilsin ki, yerləşdirmək istədiyiniz 3 növ hadisə var... sadəcə olaraq müvafiq təyinat üçün URL-i dəyişdirin və o işləyəcək.

Calendly'nin Inline Embed Popup

Daxil edilmiş yerləşdirmə bir az fərqlidir ki, o, xüsusi olaraq sinif və təyinat tərəfindən çağırılan div-dən istifadə edir.

<div class="calendly-inline-widget" data-url="https://calendly.com/highbridge-team/sales" style="min-width:320px;height:630px;"></div>

Yenə də bu faydalıdır, çünki hər birində birdən çox div ola bilər Gündəmdə eyni səhifədə planlaşdırıcı.

Əlavə qeyd: Kaş ki, Kalendli bunun həyata keçirilmə üsulunu dəyişdirsəydi, belə ki, bu qədər texniki olmamalıdır. Sadəcə bir sinifə sahib ola bilsəniz və sonra vidceti yükləmək üçün təyinat hrefindən istifadə etsəniz çox yaxşı olardı. Bu, məzmun idarəetmə sistemləri arasında daha az birbaşa kodlaşdırma tələb edəcəkdir. Amma... bu əla vasitədir (hazırda!). Məsələn, qısa kodlu bir WordPress plagini WordPress mühiti üçün ideal olardı. Əgər maraqlanırsınızsa, Calendly... Bunu sizin üçün asanlıqla qura bilərəm!

Calendly ilə başlayın

İmtina: Mən Calendly-nin istifadəçisiyəm və eyni zamanda onların sistemi üçün filialam. Bu məqalədə məqalə boyunca filial əlaqələri var.