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: