By: Budi Haryono

Tutorial Cara Buat Menampilkan Live Chat Telegram

Kita akan membahas tentang tutorial cara buat dan menampilkan fitur Live Chat diwebsite kita yang terhubung dengan aplikasi Telegram. Langsung kita mulai:

Tutorial Cara Buat Menampilkan Live Chat Telegram

Kita akan menggunakan sebuah repository yang ada di Github yang bernama IDOCO dengan urlnya adalah: https://github.com/idoco/intergram?tab=readme-ov-file (integram).

Yang akan kita lakukan adalah:

1. Menggunakan functions.php yang ada didalam theme Anda atau
2. Install plugin yang telah saya buat

[warning]Sebelum memcoba wajib untuk Lakukan backup atau coba di localhost terlebih dahulu.[/warning]

Menggunakan Metoda Edit Functions.php

1. Login ke WordPress

Login ke WordPress kemudian kunjungi Appearance > Theme File Editor lalu pilih function.php lalu paste kode berikut:

Membuat Option Page Untuk Memasukan Telegram ID

function mmwplct_plugin_menu()
{
    add_menu_page(
        'MM WP Live Chat Telegram Options', // Page title
        'MM WP Live Chat Telegram', // Menu title
        'manage_options', // Capability
        'mm-wp-live-chat-telegram', // Menu slug
        'mmwplct_options_page', // Function to display the options page
        'dashicons-admin-comments', // Icon
        99 // Position
    );
}

function mmwplct_options_page()
{
?>
    <div class="wrap">
        <h1>MM WP Live Chat Telegram Options</h1>
        <form action="options.php" method="post">
            <?php
            settings_fields('mmwplct_options_group');
            do_settings_sections('mm-wp-live-chat-telegram');
            submit_button();
            ?>
        </form>
    </div>
<?php
}

function mmwplct_register_settings()
{
    register_setting('mmwplct_options_group', 'mmwplct_telegram_id', 'sanitize_text_field');
    add_settings_section(
        'mmwplct_main_section',
        'Main Settings',
        'mmwplct_section_text',
        'mm-wp-live-chat-telegram'
    );
    add_settings_field(
        'mmwplct_telegram_id',
        'Telegram ID',
        'mmwplct_display_telegram_id_field',
        'mm-wp-live-chat-telegram',
        'mmwplct_main_section'
    );
}

function mmwplct_section_text()
{
    echo '<p>Enter your settings below:</p>';
}

function mmwplct_display_telegram_id_field()
{
    $option = get_option('mmwplct_telegram_id');
    echo "<input id='mmwplct_telegram_id' name='mmwplct_telegram_id' type='text' value='" . esc_attr($option) . "' />";
}

add_action('admin_init', 'mmwplct_register_settings');
add_action('admin_menu', 'mmwplct_plugin_menu');

Cara Mendapatkan ID lihat gambar ini

Menampilkan Kode Live Chat

function mmwplct_live_chat_telegram()
{
    $mmwplct_telgram_id = get_option('mmwplct_telegram_id');
?>
    <script>
        window.intergramId = "<?php echo esc_html($mmwplct_telgram_id); ?>";
        window.intergramCustomizations = {
            titleClosed: 'Live Chat',
            titleOpen: 'Live Chat',
            introMessage: 'Pesan pertama saat chat dibuka',
            autoResponse: 'Pesan yang dikirim setelah pengguna mengirim pesan pertamanya',
            autoNoResponse: 'Pesan yang dikirim satu menit setelah pengguna mengirim pesan pertamanya ' +
                'dan tidak ada tanggapan yang diterima',

            //Bisa berupa warna yang didukung css 'red', 'rgb(255,87,34)', dll
            mainColor: "green",

            //Gunakan tombol mengambang seluler juga pada layar besar
            alwaysUseFloatingButton: false
        };
    </script>
    <script id="intergram" type="text/javascript" src="https://www.intergram.xyz/js/widget.js"></script>
<?php
}

add_action('wp_footer', 'mmwplct_live_chat_telegram');

Ikuti keterangan tambahan seperti cara mendapatkan ID telegram silahkan baca langsung disini https://github.com/idoco/intergram?tab=readme-ov-file

Menggunakan Plugin

Visit https://github.com/itcomindo/mmwp-livechat-telegram lalu download dan install kedalam WordPress Anda dan masukan kode telegram ID yang telah Anda buat.

Contoh yang sudah terpasang: