Issues with newest code
RéponduHi,
I tried to implement the newest code, released in august, for GraphComment into a Ghost blog. However, it does not seem to work. (No issues with the old code)
- On page load, the page seems to have a semi-transparent overlay, but no comment section is visible and I cannot clic anywhere.
- Secondary issue, I can customize the color of the Button but not the bubble one in the bottom right corner.
- This code, isn't it suppose to update itself?
-
/ HIGHLY RECOMMENDED // uid: "...", // uniq identifer for the comments thread on your page (ex: your page id)
Thank you :)
-
Commentaire officiel
Hello,
Did you try this tutorial?
https://gist.github.com/ddtraceweb/15ff171ee00d9db8ba6c695873a7d938
-
Hi,
The issue was with AMP, if I disable the AMP function in the GraphComment admin then it works.
However I still have 2 issues.
- It does not detect light vs dark mode
- The bubble does not have the same colour as the button.
FYI, with the old code, the dark vs light was working.
Edit: I fixed the colour for the bubble by adding:"bubble": {
"background":"#487ec0",
"color":"#000000"
}0 -
Dark mode vs light mode still won't work. I am not sure why...
0 -
Any ideas?
0 -
Hello, when you force the mode in Settings of your admin, does it work ? Is it the automatic detection that won't work ?
0 -
Hi,
The automatic detection does not work at all, the light theme for GC stays whether the site uses the light or dark theme globally.
When I force it, it becomes partially dark. See below0 -
Ok, I see you use the sidepanel, this is why it's not working.
In this case, you can define the colors yourself, here are the variables for your GC tag :
export type GCOverlayParams = { alternate?: boolean; background?: string; pageWidth?: number; visible?: boolean; width?: number; zindex?: number; button?: { background?: string; color?: string; label?: string; link?: string; mobileLink?: string; target?: HTMLElement; width?: number; }; bubble?: { background: string; color: string; placement: Record<string, string>; zindex: number; }; };
0 -
I am not sure where to set this :/
With the older version of the code, the sidepanel was working fine for auto-detection of the theme colours.Here is the code I use:
/* - - - CONFIGURATION VARIABLES - - - */
var__semio__params = {
graphcommentId:"MySiteID", // make sure the id is yours
behaviour: {
// HIGHLY RECOMMENDED
// uid: "...", // uniq identifer for the comments thread on your page (ex: your page id)
uid:"ghost-{{comment_id}}",
url:"{{url absolute="true"}}",
telemetricThroughCmp:true
},
// configure your variables here
"sidePanel": {
"width":null,
"button": {
"background":"#487ec0",
"color":"#e6e6e6",
"label":"Rejoindre la discussion"
},
"bubble":true,
"visible":false,
"bubble": {
"background":"#487ec0",
"color":"#e6e6e6"
},
},
}0 -
Hello, there was a bug, we've fixed it. Sorry about that.
Please add this variable to your script:
you can force it with 'light' or 'dark' value.//force dark theme integration: { theme: 'dark', },
0 -
Hi,
And if I want it to automatically change, do I have to change something?
Forcing it with your code works. But the autodetection does not.
Also, loading times are higher.
Edit: I tried changing dark by auto in the snippet of code you gave me, but it creates a hybrid theme :D and the results are the same if I load my site with the light theme and dark theme.0 -
Hi,
The theme still does not adapt automatically. If I write light, it loads the light one, if I write dark it loads the dark one.
But if I write auto, it is a mix between the 2. It looks the same if my site has the light or dark theme activated. It looks like the screenshot in my last post.
If I do not specify any colour in the code, it loads the light theme.
It used to work well with the previous version of the code a few months ago.0
Vous devez vous connecter pour laisser un commentaire.
Commentaires
11 commentaires