I have been trying to modify the image viewer example (grist-widget/viewer at master · gristlabs/grist-widget · GitHub) to show a web page (in an iframe) in the custom widget, based on what row is selected in another widget.
Right now I’m getting a broken image.
I’m just beginning to learn how to do simple coding, but I’m thinking this may have to do with the code being written to display an image file on an HTML page (the widget) rather than it being meant to embed a whole page. Can you help me modify the code so that this will work?
Thanks in advance
For embedding an HTML page, try using the renderhtml custom widget, available at this URL: https://gristlabs.github.io/grist-widget/renderhtml.
There is an example here: https://public.getgrist.com/f95AzwmFZSp3/Embedded-Twitter-Widget/m/fork. To use it, make a single column visible to the widget, containing the URL of an HTML page.
The widget supports some parameters for what tags to enable in the iframe; the example above includes ?tags=script in the URL because that’s necessary to embed from Twitter. But for simple examples, it shouldn’t be needed.
By the way, for anyone looking for an example of using the image-viewer widget, there is an example here: https://public.getgrist.com/uMphMkdP6BZQ/Linked-Images/m/fork.
1 Like
Thanks so much @dmitry-grist
It seems to be working now, but intermittently. When I immediately go to the page, the widget shows the HTML (in this case, LinkedIn Profile badges), but when I then try to select another record in the linked table, it doesn’t load – the widget remains blank.
Any tips on how to solve this? Is there some setting that requires the widget to be refreshed? I’ve got the custom widget linked to get data from the same table I’m using to select the record/row – other widgets change properly when I select a new row, but not the custom widget to render HTML.
Thanks for your help!
Hi @Pamela_Parker! Hmm, it looks like there are several possible culprits, but the ultimate issue may be specific to LinkedIn.
Firstly, there is the question of what HTML is rendered. I went ahead and added a “LinkedIn Badge” example to https://public.getgrist.com/f95AzwmFZSp3/Embedded-Twitter-Widget/p/3/m/fork. I found it important to include the script portion below the <div> in the HTML. It’s also important to tack on ?tags=script to the URL of the Custom Widget.
With this, some profiles sometimes loaded. In fact, initially they loaded very well. But soon stopped. On the browser’s debugging console, I see requests to LinkedIn failing with error code 999:
That’s not a normal code. Google brings up as first answer that it means “LinkedIn does not like you”. This discussion is a bit more revealing: https://www.reddit.com/r/linkedin/comments/ixwoxr/999_request_failed_with_reason_codes_1_2_1/ – it sounds like LinkedIn considers a series of badge requests as suspicious (sounds like there are profile-boosting tools with a similar behavior, which it’s trying to block). It is probably blocking the IP address from requesting more profiles once it identifies the requests as suspicious.
Other reasons the page might not load is if you have strict privacy settings in the browser (since LinkedIn is a known tracker across the web, requests to it may get blocked by more privacy-oriented browsers).
The profile badges don’t seem to work for company pages at all, so that’s another reason it may show up blank.
But after fixing all other reasons, if you open the network tab of the developer console in the browser, and find 999 error codes, it means the requests are getting blocked by LinkedIn, and am not sure if there is a workaround.
Ok, that makes sense. Thank you. Possibly stupid question, but where do I see the debugging console?
I might try to get a developer account with LinkedIn and see if I can do something that way. If they offer free accounts, that is.
Really appreciate this, BTW, and it boosts the utility of Grist for me immensely.
Oh, the last link I shared had instructions for opening the browser’s developer console (which I referred to also as debugging console): Finding Your Browser's Developer Console | Balsamiq. Instructions are a bit different for different browsers, but all have a “Console” tab that shows messages including warnings and errors, and a “Network” tab which shows network requests with response codes.
Thanks. I was aware of that but didn’t know if the Custom Widget or Grist had a log or debugging console itself. I’ll look at the browser info going forward. Again, appreciate it much!
Ok, I’m still trying to make this work, but with a different page – not LinkedIn. It’s actually a script to display an RSS feed, so there shouldn’t be any limitations on fetching it. I’ve tried both JavaScript and iframe, and I am getting errors. Specifically, it looks like it has to do with a line I copied from your renderhtml widget example:
I’m pasting the error log here. Am I still doing something wrong or is there something on your end going on?
P.S. I embedded the same code on my own WordPress site and it worked fine. iFrame on top and JavaScript on the bottom: Test Page - Pamela Parker
