Embedding Keen Dashboard to Web Applications - javascript

I have created a dashboard in Keen and I want to use the same dashboard in my web application. Is there any way a complete dashboard can be embedded in another application?
Iframe won't work due to crossorigin restriction. Using javascript to create widgets of a dashboard is a solution but I wanted to skip the coding part of it. Reason for this is because if my client wants to update the dashboard then he can do so by simply updating it on keen and new build should not be required for such thing.

I work at Keen and you're correct that the iframe won’t work, because of the security changes introduced to the browsers to stop clickjacking attacks.
In the first iteration of “embed html” we used a static version of the properties used to store your json (which contains info about the charts to render and the names of saved queries to use).
We're working on deploying the updated version of the dashboard-viewer - which supports dynamic loading of the current state of the dashboard.
This should solve the issue you're referencing. If you would like to submit a ticket on our website would could provide a time as it get's closer to launch. Just reference this url.
https://responsivedesign.is/articles/xframe-options/
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options

Related

Page created with ReactJs is not indexed by google

I have a news section created with ReactJs, each news post acts as an individual page.
Unfortunately Google is not indexing these pages because of REactJs. I tried to use the babel-polyfill webpack, but it's still not working. Also, I'm making my Ajax call BEFORE rendering the DOM.
Any other ideas for another workaround on this?
the google crawler won't wait for async requests to resolve, and because your pages are rendered on the users' client, they will appear to be empty pages.
You have two options. Either modify your app to render on the server, this is often called a universal app, or an isomorphic app. There are many tutorials for creating these. The other option is to pre-render static html from your code so that the crawler can see what should be there. There are numerous libraries you can use for this.
The first option is more extensible and probably preferable, but a bit more complex. So make the choice about whats more appropriate for you
It is not indexing them because they are bundled so tat they could be rendered inside your client's browser. What you ought to do is server side rendering.
You can find more about it here: https://medium.freecodecamp.org/server-side-rendering-your-react-app-in-three-simple-steps-7a82b95db82e

Integrating an Angular SPA in a webpage - Request for suggestion

I have a CMS based website where I need to add a standalone AngularJS based app. Given the single minified JS for the app is 13Mbs.
The options that I see are:
A.) EMBED the app directly in a webpage, we can add a SECTION/DIV on a webpage and let the script render the app in that tag. With this approach, my concerns are the additional HTTP request and the obvious 13Mbs of additional data.
B.) The other way is to add this app using an iframe and pass the URL, this is the straightforward way. I will not have to retouch the CSS as well. This approach helps in eliminating the above concerns. But I will have to write additional manage the height of iframe to make sure the app looks like a part of the page itself.
Your SUGGESTION, please.
Ask the team to reduce the file size of your javascript or break it into multiple pieces based on nature of your application.
If the libraries inside the application ( JS/CSS) are non conflicting - (which is not the usual case) opt for embeding, because it would give a seamless integration.
If you want to make sure your pages are safe and the application is from third party where you dont have control, put that in an iframe. Ask the third party to talk to your javascript by post messaging, so that you can resize it as and when required. Refer (https://medium.com/#Farzad_YZ/cross-domain-iframe-parent-communication-403912fff692)

tvOS load website URL

I am new in tvOS application. i am trying to integrate custom application with TVML & TVJS. I created a page and add banner in it. My requirement is to load a webpage inside that application. I tried different methods to load a webpage using that application.js file but fails. Please help me how to load a webpage using TVML and TVJS.
If I understood you correctly, you need to use UIWebView class but you cannot find it in the tvOS SDK (because it was removed). But you can use this class as a "private API class" (you can create an instance of this class and call methods for it, because you have enough information about UIWebView). It can be hard for you. If so, you can use some libraries (such as https://github.com/jvanakker/tvOSBrowser) that using the private API to make UIWebView available in the tvOS.
I think you might have a hard time on getting a web browser on the TV app store, as I think apple does really see people browsing on the apple tv.
Depends on your use case,
if you are only trying to display a page, you might able to use some of the online url to picture services like https://urlbox.io/docs, or build your own server using existing browser features. https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/getScreenshot
If you are getting users to another services, the correct way to do is with deep link, which you can learn more about here. https://developer.apple.com/videos/play/wwdc2017/246/
or if you are trying to transfer the view into sales, displaying a QR code is the way to go. as iOS 11 makes QR Code scanning a standard, it will be very easy for your users to scan the code. https://www.cnet.com/how-to/how-to-use-ios-11s-hidden-qr-code-reader/

Adding pure javascript code to Shopify Theme by using Shopify API

I developed a Shopify application that i install on Shopify Store and i want my application to add a javascript snippet in all the store pages. For this I want my application to modify the current theme, by using Shopify API, and add the javascript snippet to that theme.
I know of several ways to do it but they have several disadvantage:
Add a Shopify Asset/Snippet - The store owner has to manually modify the store's theme to link to the asset/snippet.
Add a script tag - I want my javascript to be embedded and not to be downloaded from a different source. A different source means longer page loads and i do not want my site to extend the page load.
Add an application proxy - This can also extend the loading time.
Can you suggest on what is the correct way to do it?
Add a script tag and be done with it. No other pattern offers up the same customer experience. When they install your App, your script is available. When they uninstall your App, their theme reverts nicely. Worrying about the load times of your asset is not worth it if you have done your job, and minimized your code and provided a fast CDN address for it.
In 2022, you get Theme App Extensions for OS 2.0. Do that!! Best way to add JS to a theme/store.
Are you using the embedded apps SDK? I'm pretty sure they have some option that makes this easier, like you can create a "sidebar" on every page and position it wherever you want (hidden if necessary).
Answering you question: the good way is using ScriptTag. Consider this article on this: https://docs.shopify.com/api/unlinked/using-javascript-responsibly
Still if you need to add code snippet as an asset, I want to point out that it's not necessary the customer must manually update the theme. As far as I know, you can add your snippet as an asset and then update another -- theme liquid template.
https://docs.shopify.com/api/asset#update
For the reasons described in an article I've provided above, you should not do that.

Use AngularJS on website and still get indexed by search engines

I want to rebuild an old website made on plain HTML and add some extra functionality with AngulaJS. But since I plan to use ng-views to render templates on my main layout, is it possible to make search engines still find the templates of these subpages?
In a general sense, this is not an angular problem - its the same problem with any single page site that uses javascript to generate your html.
The general solution would be to detect when it is a crawler accessing your page instead of a person (usually by using the query agent string), and then use server side logic to render pages that are suitable for the crawler to process.
Here is one article that discusses this problem:
http://www.webdesignerdepot.com/2013/10/how-to-optimize-single-page-sites-for-search-engines/
but google (or searching this site) for "google seo single page app" will give you lots of other ideas.

Categories