We are using zapier's webhooks to collect answers we gather via html5 formatted mail messages. The mail is created with zapier and includes some dynamic info and two buttons to make your choice. These button actions are each linked to a different webhook. The webhook provided by zapier has a static part and a dynamic part which is a zapier variable. When the receiver pushes the button, a blank browser window shows up with, whether a short text or in "silent mode" a blank page.
Although we are sending an extra mail as confirmation for the decision made via mail, we would like to either avoid the showing of this blank page at all or maybe replace it by a customized HTML page that shows a more attractive web page.
We tried different approaches like using an additional javascript onlick action on the button to achieve the opening of two pages with one click. One with the webhook blank page as the trigger and another one with a nice confirmation message page for a nice user experience. Unfortunately, there are some mail client limitations that seems not to allow javascript executions.
Is there any workaround like using any third-party service that offers webhook containers with the possibility to customize the content of the page linked to the webhook URL or any idea on how to link a button action to two url’s?
Thank you for reading this long question. Any help would be greatly appreciated.
David here, from the Zapier Platform team.
I can't speak to other options, but the best choice for you here is probably to have the email link go to a static page with two buttons. That way, you'll be in the browser and can do whatever you need with JS. This is likely buttons that have onClick handlers and then show nice confirmations.
It also avoids false clicks, where a mail client tries to load external resources (which normally doesn't matter, but in this case can trigger a webhook).
Related
I am curious about submitting a form data internally.
Here is an example.
I want to register an account for a website. The website will give a form to register which upon submitting will create an account for me.
But I don't want to go to that site. Instead I'll give a form in my style and collect the same information. Upon submit, I want to create the account automatically. Automatically in the sense, I'll submit the form internally.
The reason why I need this feature is, I don't want my users to create a separate account in another website also. I mean it should save user's time in creating account only. Rest of the things will be taken care by me.
Please let me know if anyone had tried this and had success.
I know it is very difficult for existing accounts and some internal errors. But I also need to track them.
Please let know if this is possible or not.
An Example
There is site called othersite.com which has a form for creating / registering users.
I will a similar form to the user on mysite.com. But upon submit the form information is sent to both mysite.com and othersite.com. Both sites create accounts parallelly with a single form submission.
Unless you are working with AJAX requests and CORS enabled sites, which I assume is not the case, client side technologies ( browser/javascript ) will not help you much to do that.
You have to ask yourself what are the options to integrate with the second site in order to automatically create the account. Following some common patterns used these days:
REST API: You have an url where you can use HTTP to talk to and ask to create the account. Many social networks and other popular services usually expose it. Facebook API
Database: Although it is less recommended you could just insert a new record into the account table if you own and have access to the database used by the second site.
Client Libraries: Some sites provide client libraries so that you can use them together with your project code base. Eg: Twitter Libraries
I have a chat system and I want to protect my users from malicious websites, and sometimes people sends a URL through the chat system, and users click on it and access some scam sites. I have that protect page like redirect.php?url=someurl.com that alerts the users that URL can be a malicious website, and the users have to click on Continue button to access the link. But I want to give them one more option which is See a preview, and clicking on it, a new tab will be opened with a screenshot, or if it's not possible only with PHP and Javascript, show a clean version of the page without Javascript.
How can I do this?
I'm planning of make use of file_get_contents(), save it to some preview text, cleaning the <script> tag of the page, but it'll be enough?
Lots of such screen capture web service here:
What's the best website screenshot capture API?
But instead of doing that by yourself, I think you should go with those many public link-shortening service, like t.co, because anti-malicious is already one of their purpose:
Having a link shortener protects users from malicious sites that
engage in spreading malware, phishing attacks, and other harmful
activity. A link converted by Twitter’s link service is checked
against a list of potentially dangerous sites. Users are warned with
the error message below when clicking on potentially harmful URLs.
Try this solution :): html2canvas
[outofdate] http://html2canvas.hertzen.com/screenshots.html
--
Update: http://html2canvas.hertzen.com
I'm building a website that is functionally similar to Google Analytics. I'm not doing analytics, but I am trying to provide either a single line of javascript or a single line iframe that will add functionality to other websites.
Specifically, the embedded content will be a button that will popup a new window and allow the user to perform some actions. Eventually the user will finish and the window will close, at which point the button will update to a new element reflecting that the user completed the flow.
The popup window will load content from my site, but my question pertains to the embedded line of javascript (or the iframe). What's the best practice way of doing this? Google analytics and optimizely use javascript to modify the host page. Obviously an iFrame would work too.
The security concern I have is that someone will copy the embed code from one site and put it on another. Each page/site combination that implements my script/iframe is going to have a unique ID that the site's developers will generate from an authenticated account on my site. I then supply them with the appropriate embed code.
My first thought was to just use an iframe that loads a page off my site with url parameters specific to the page/site combo. If I go that route, is there a way to determine that the page is only loaded from an iframe embedded on a particular domain or url prefix? Could something similar be accomplished with javascript?
I read this post which was very helpful, but my use case is a bit different since I'm actually going to pop up content for users to interact with. The concern is that an enemy of the site hosting my embed will deceptively lure their own users to use the widget. These users will believe they are interacting with my site on behalf of the enemy site but actually be interacting on behalf of the friendly site.
If you want to keep it as a simple, client-side only widget, the simple answer is you can't do it exactly like you describe.
The two solutions that come to mind for this are as follows, the first being a compromise but simple and the second being a bit more involved (for both you and users of your widget).
Referer Check
You could validate the referer HTTP header to check that the domain matches the one expected for the particular Site ID, but keep in mind that not all browsers will send this (and most will not if the referring page is HTTPS) and that some browser privacy plugins can be configured to withhold it, in which case your widget would not work or you would need an extra, clunky, step in the user experience.
Website www.foo.com embeds your widget using say an embedded script <script src="//example.com/widget.js?siteId=1234&pageId=456"></script>
Your widget uses server side code to generate the .js file dynamically (e.g. the request for the .js file could follow a rewrite rule on your server to map to a PHP / ASPX).
The server side code checks the referer HTTP header to see if it matches the expected value in your database.
On match the widget runs as normal.
On mismatch, or if the referer is blank/missing, the widget will still run, but there will be an extra step that asks the user to confirm that they have accessed the widget from www.foo.com
In order for the confirmation to be safe from clickjacking, you must open the confirmation step in a popup window.
Server Check
Could be a bit over engineered for your purposes and runs the risk of becoming too complicated for clients who wish to embed your widget - you decide.
Website www.foo.com wants to embed your widget for the current page request it is receiving from a user.
The www.foo.com server makes an API request (passing a secret key) to an API you host, requesting a one time key for Page ID 456.
Your API validates the secret key, generates a secure one time key and passes back a value whilst recording the request in the database.
www.foo.com embeds the script as follows <script src="//example.com/widget.js?siteId=1234&oneTimeKey=231231232132197"></script>
Your widget uses server side code to generate the js file dynamically (e.g. the .js could follow a rewrite rule on your server to map to a PHP / ASPX).
The server side code checks the oneTimeKey and siteId combination to check it is valid, and if so generates the widget code and deletes the database record.
If the user reloads the page the above steps would be repeated and a new one time key would be generated. This would guard against evil.com from page scraping the embed code and parameters.
The response here is very thorough and provides lots of great information and ideas. I solved this problem by validating X-Frame-Options headers on the server-side , though the support for those is incomplete in browsers and possibly spoofable.
Disclaimer: I am living at some place where my net connection gets cut off at least ten times a day. I am not sure if my question makes much sense to guys with stable connection.
Question: Suppose that I am checking GMail when the connection gets cut off. Then, if I unknowingly press my Inbox link, instead of a browser specific error page, I just get a warning div displayed at the top of my page like, "Unable to Connect. Please try in ___ seconds / minutes".
How can I replicate this feature in my web app?
This happens because Gmail uses AJAX requests instead of hyperlinks to new pages.
When you make an AJAX request, you can add an error handler that does whatever you want.
It is impossible to add error handling to normal page navigation.
When you press the link to inbox, you start an ajax request (easy to do using jQuery).
It it succeed, then insert the content and change the url.
If it fails, give the user an error.
Remeber to use a plugin like jQuery BBQ to make back/forward buttons work.
Requests to third party servers keep slowing my site down, so I am trying to have as few as possible.
In my book, the ideal "tweet this" solution should
be a small JavaScript snippet to be hosted on my own site
not have any activity while loading the page (at least as few as possible, but no additional HTTP requests)
just when clicked, retrieve short URL and tweet it
Is there anything like this? All solutions I have found do load stuff from other servers while my page is loading.
I would not mind to do some of the scripting around this myself, but of course I do not want to re-invent the wheel, if there is a good solution around.
EDIT: In case anyone is interested in what I finally ended up with.
I decided to implement the API call in my backend, triggered by an AJAX request when the user clicks a button. From the client perspective, this solution needs least resources and is as lazy as it can be. Plus: addressing the bit.ly API directly is really trivial.
However: retweet.js (posted below) is still the best out-of-the-box client-side solution I have seen so far.
Not 100% certain this is what you're after, but have you had a look at this?
Easy Retweet Button by John Resig http://ejohn.org/blog/retweet/
It uses bit.ly to shorten urls and forwards the user to their Twitter login page.
Oh, and it uses jQuery which can be hosted on your site. :-D
You could go with a really lo-fi solution and simply link to the Twitter page from your home page. Add a link like this:
Tweet this!
... where [mystatus] would be some string representing the tweet you want the user to send.
This link, when clicked on, will open a new window/tab and, if the user is logged into Twitter, will populate the status message input with the [mystatus] string. If the user is not logged in, they'll get redirected to the Twitter login screen and after a successful login their status input will be populated with the [mystatus] string.
You would need some kind of solution to customize the [mystatus] string to contain what you want it to contain. Some options:
You could do this with a server-side language: construct and populate the href attribute of the anchor tag before the HTML is composed and sent to the client.
You could also do this with JavaScript after the page loads: attach some function on page load that will change the href attribute of the anchor tag to contain the status message you desire.