Search…

X3 Photo Gallery Support Forums

Search…
 
User avatar
TristanJo
Experienced
Topic Author
Posts: 116
Joined: 10 Apr 2018, 02:57

Re: Custom link button

16 Dec 2020, 03:02

mjau-mjau wrote: Ok, so here is the integration. It's still not clear to me what is supposed to happen on button "click", and where are the Talk Javascript files? I assume you will load the Javascript files for Talk separately. Also, I see function "plusFriendChat", but that is not triggered from anywhere.

The below requires that you already have at least one button (for example audio player) in the plugin buttons on the right, so that it can be used by the Javascript:

1. Upload the PNG logo to /content/custom/files/images/kakao.png from your panel, so that it can be accessed from that URL.

2. Settings > Custom > Custom CSS:
Code
/* I don't know what this is for, but assume it's for the chat window that loads */
.kakaoChat {
  position: fixed;
  z-index: 999;
  right: 15px; /* Position */
  bottom: 20px; /* Position */
}

/* for the custom button */
#button_talk > span:after {
  content: 'Talk';
}
#button_talk img {
  width: 24px;
}
3. Settings > Custom > Custom Javascript:
Code
// I don't know what this is for ...
function plusFriendChat() {
  Kakao.Channel.chat({
    channelPublicId: 'ID' // kakao talk channel ID
  });
}

// X3 is loaded
function x3_load(){
  setTimeout(function(){

    // get buttons container
    var plugin_buttons = document.getElementById('x3_plugin_buttons');
    if(!plugin_buttons) return;

    // insert new custom button with custom icon
    plugin_buttons.insertAdjacentHTML('beforeend', '<button id="button_talk" style="opacity:1"><span></span><img src="/content/custom/files/images/kakao.png"></button>');
    var button_talk = document.getElementById('button_talk');

    // click event for custom button. I see Kakako.init(), which surely requires some other Javascript ...
    button_talk.addEventListener('click', function(){
      // console.log('click');
      Kakao.init('JavaScript key');
    });
  }, 1000);
}
Thank you ~ but 
When I do this, the button works
Attachments
스크린샷 2020-12-16 오후 5.19.15.png
스크린샷 2020-12-16 오후 5.19.15.png (97.49 KiB) Viewed 1276 times
스크린샷 2020-12-16 오후 4.55.42.png
스크린샷 2020-12-16 오후 4.55.42.png (214.57 KiB) Viewed 1281 times
스크린샷 2020-12-16 오후 4.55.58.png
스크린샷 2020-12-16 오후 4.55.58.png (53.73 KiB) Viewed 1281 times
Last edited by TristanJo on 16 Dec 2020, 03:19, edited 1 time in total.
 
User avatar
TristanJo
Experienced
Topic Author
Posts: 116
Joined: 10 Apr 2018, 02:57

Re: Custom link button

16 Dec 2020, 03:03

If it's difficult, i can just use link url.

Actually, we need both codes.

Link URL
Open APP

and hover effect plz~:pray:
Attachments
스크린샷 2020-12-16 오후 5.12.35.png
스크린샷 2020-12-16 오후 5.12.35.png (158.05 KiB) Viewed 1277 times
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Custom link button

16 Dec 2020, 03:49

What is the link to your website? It's hard to understand ... I can't provide methods on how to trigger the CHAT plugin unless you provide instructions on how it should be triggered. There is nothing in your previous post that explains how to start the chat, or where it loads.

And what's the remaining question? You can add effects to the SVG icon you provided ... You can change the text that appears in the button on hover:
Code
#button_talk > span:after {
  content: 'Kakao Talk';
}
 
User avatar
TristanJo
Experienced
Topic Author
Posts: 116
Joined: 10 Apr 2018, 02:57

Re: Custom link button

16 Dec 2020, 04:49

mjau-mjau wrote: What is the link to your website? It's hard to understand ... I can't provide methods on how to trigger the CHAT plugin unless you provide instructions on how it should be triggered. There is nothing in your previous post that explains how to start the chat, or where it loads.

And what's the remaining question? You can add effects to the SVG icon you provided ... You can change the text that appears in the button on hover:
Code
#button_talk > span:after {
  content: 'Kakao Talk';
}
Can i change the color of the svg icon when i mouse over?

There is no English page for the button manual

https://developers.kakao.com/docs/lates ... channel/js

And just let me know so that the button can work with the link URL.

I'm sorry.
Attachments
스크린샷 2020-12-16 오후 6.46.30.png
스크린샷 2020-12-16 오후 6.46.30.png (13.18 KiB) Viewed 1274 times
스크린샷 2020-12-16 오후 6.46.19.png
스크린샷 2020-12-16 오후 6.46.19.png (11.71 KiB) Viewed 1274 times
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Custom link button

16 Dec 2020, 05:36

TristanJo wrote:Can i change the color of the svg icon when i mouse over?
Unfortunately, that's not possible. It's an SVG image, and you can't change the colors of an image. We can change colors of default icons in X3 because they are from a FONT (font-awesome icon font).
TristanJo wrote:And just let me know so that the button can work with the link URL.
You mean you want to just open a link? In a popup window or new browser window? Edit the "click" code to something like this:
Code
button_talk.addEventListener('click', function(){
  window.open("https://www.w3schools.com"); // Change the url!
});
 
User avatar
TristanJo
Experienced
Topic Author
Posts: 116
Joined: 10 Apr 2018, 02:57

Re: Custom link button

16 Dec 2020, 10:22

mjau-mjau wrote:
TristanJo wrote:Can i change the color of the svg icon when i mouse over?
Unfortunately, that's not possible. It's an SVG image, and you can't change the colors of an image. We can change colors of default icons in X3 because they are from a FONT (font-awesome icon font).
TristanJo wrote:And just let me know so that the button can work with the link URL.
You mean you want to just open a link? In a popup window or new browser window? Edit the "click" code to something like this:
Code
button_talk.addEventListener('click', function(){
  window.open("https://www.w3schools.com"); // Change the url!
});

Thank you. Everything's good.