Develop Reference

How to add(embed) a widget to another website like tawk.to, disqus etc.?

I am trying to make a widget that I can add to another website through code embedding, much like tawk.to.
I have tried using iframe and object with embed but for some reason it is slow. As a page it fetches the images fast but when I embed it, it is slow. Also I heard that it is not best practice.
So I searched what other websites are doing and I found out that disqus is using iframe and tawk is using the below code. As messaging widget don't use much data, iframe seems to work but in my case, my widget is fetching a lot of data from an API.
tawk.to is using this code:
<!--Start of Tawk.to Script-->
<script type="text/javascript">
var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
(function(){
var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
s1.async=true;
s1.src='https://embed.tawk.to/APIKEY';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);
})();
</script>
<!--End of Tawk.to Script-->
I already have a page and I want to put in inside another website page using something?
And it is gonna display a small icon like tawk.to and when clicked it's gonna show the page inside the widget.
How can I achieve this?

Using an iframe as in itself is not slow however if you insert the iframe directly then it will load inline with the rest of the page. The approach that Tawk.to use is:
Simple javascript (as you have already pasted), which simply creates a second script element within the page, explicitly sets it to async, and then adds it to the DOM - this then triggers the script to load.
This script will then call the Tawk servers, and return a more complete javascript, containing their full code, but without slowing the page load down.
In the case of Tawk.to they do use an iframe to display their chat widget - which is generally a straightforward way of ensuring there are no styling clashes, or if wanting to load a remote page directly.
I have created widgets both in this way, and also by adding elements directly to the DOM. The key part here is the js chaining - the first script does nothing except construct the second and doesn't impact page load.
Applying this to your case, you could:
Use similar JS chaining to load your main JS script
Have the main JS script add a hidden iframe which loads the page you already have.
Add a button element to the DOM which toggles the visibility of the iframe you added.

how to add javascript to a web form in Microsoft Dynamics 365

I am making a web form in Dynamics 365 and am currently trying to figure out, how to add a javascript code to it. Web form is working and is displayed correctly (submit also works), but the problem is in the way javascript code has to be added. I tried following this guide: https://learn.microsoft.com/en-us/dynamics365/marketing/developer/marketing-form-client-side-extensibility
The problem is that I can't get even the basic console.log() to run. I added the code to the form in a script tag in the < head>, like this, but the code gets removed when i inspect the webpage upon load. loader.js, which is needed, loads. Here is the sample code, that I added.
<pre>
<script type="text/javascript">
console.log("SHOW ME");
MsCrmMkt.MsCrmFormLoader.on("formLoad", function(event) {
console.log("formLoad");
})
MsCrmMkt.MsCrmFormLoader.on("formRender", function(event) {
console.log("formRender");
})
</script>
</pre>
Can somebody help me and show me what is the correct way to add JS code to the page?
Thank you

Mybe you should give look at HTML Web References for Dynamics 365

Using JS to print page as PDF in Chrome and open it

I have an internal site with lots of different pages, all of them has a printable version controlled by CSS only. My users create PDFs using Chrome's Print/Save As PDF menu command. I wonder if it would be possible to use JavaScript to initiate Save As PDF from a button and automatically open the saved PDF (actually saving is not important, just viewing it on a new tab is fine).
Chrome-only solution is OK. It's also not a problem if a Chrome extension needs to be installed. Anything is fine as long as I don't have to write extra PDF rendering code for each page layout.

There is no way to force a browser to print something as a PDF, or even send a request to a printer, the best method you can do it use the print() function in JavaScript.
A way you can do this is to make it an iframe object and print it like this:
document.getElementById('content-frame').contentWindow.window.print();
That would make it send a print menu for the iFrame, printing only the content within the iFrame.

The html embed tag displays PDFs with print and download options. Depending on the setup of the page, you could append an element somewhere with the pdf source dynamically populated from a button users see beside the PDF's name.
For Example...
HTML:
<div class="parent-container">
<h3 class="pdf-name">Some PDF Name</h3><button type="button" class="open-pdf"
data-pdf="source">Open</button>
</div>
Javascript:
function displayEmbeddedPdf (event){
event.preventDefault();
let pdfSource = $(this).data("pdf");
let pdfDisplay=`<embed class="embed-responsive-item embedded-pdf"
src="https://via.placeholder.com/150#view=FitH">`
$(this).parent().append(pdfDisplay);
}
$( document ).ready(function() {
$(".open-pdf").click(displayEmbeddedPdf)
});
I've used an image placeholder in the space below, but you could instead
insert the pdfSource variable to access a source in your directory ... Also
note that the "embed-responsive-item" class on the embed tag is from with
Twitter Bootstrap and helps with the responsive formatting. Also, "#view=FitH" is an open parameter. Here's more info about open parameters: https://www.adobe.com/content/dam/acom/en/devnet/acrobat/pdfs/PDFOpenParams.pdf
See the code on this CodePen: https://codepen.io/gemiller/pen/qvyaGZ
Here's an example of what an embedded pdf looks like: https://msu.edu/~urban/sme865/resources/embedded_pdf.html

How can I target a div on my HTML page with Javascript to change the contents of an element?

I've got an interesting question. I'm running Squarespace # buscadprimero.caminoglobal.org
and need to target the top-right button on the navigation (Ingresar, which means login) to bring up a Javascript form provided to me via embed code. The code itself works fine when included as a code block in the body of a page, but Squarespace only allows navigation buttons at the top to be hyperlinks. There's nowhere for me to add code to the button itself, being that it is a largely consumer platform and works great for straightforward application until you try to change the way it works.
They make an allowance for custom code via a "code injection" menu that adds whatever code you want to the HTML header of the page, so I've been trying to target this div, which does not have an id but who's class is external, with Javascript to replace its contents with an onclick listener to bring up this form. Tracking?
Here's my embed code, which like I said is fine:
<script>// <![CDATA[
!function(e,t){e._cc={}, e._cc.host="https://www.coachingcloud.com/";var n=function(){var n=t.createElement("script"),c=t.getElementsByTagName("script")[0];n.src=e._cc.host+"login.min.js",c.parentNode.insertBefore(n,c)};e.addEventListener?e.addEventListener("load",n,!1):e.attachEvent("onload",n)}(window,document);
// ]]></script>
I've been trying document.getElementsByClassName("external").innerHTML; but when set to a var that returns undefined. New to Javascript but not afraid to learn. I'd like to figure out how to properly target the div, first of all, and then replace its contents (which currently is a link to my 404 page) with a Javascript function that activates on click. Thanks for the guidance!

I've tested the following on your site in Chrome, and have successfully changed the content. The page contained multiple ".collection" elements, so i select only the last one:
JavaScript / jQuery
$("#mainNavigation .collection").last().html("<a href='/newlink'>Test</a>");

Thanks to the great help of #Arg0n, I've now got a working login form that appears in the top-right-most button of my site. Using:
$(function() { $("#mainNavigation .collection").last().html("<span id='cc-login'>Ingresar</span>"); });
as the function to replace the contents of the div in question, I inserted <span id='cc-login'>Ingresar</span> as the call to the provided embed code:
<![CDATA[ !function(e,t){e._cc={}, e._cc.host="https://www.coachingcloud.com/";var n=function(){var n=t.createElement("script"),c=t.getElementsByTagName("script")[0];n.src=e._cc.ho‌​st+"login.min.js",c.parentNode.insertBefore(n,c)};e.addEventListener?e.addEventLi‌​stener("load",n,!1):e.attachEvent("onload",n)}(window,document); // ]]>
Turns out that a little jQuery was helpful in accessing the desired div, and setting its html contents was a bit beyond my area of expertise.
Many thanks to the StackOverflow community for helping me learn about targeting page elements with Javascript to procedurally manipulate its contents.

Using <ahref> tag in google sheet GUI using google script

I am creating a GUI using google sheets and google script. As of recently, that requires serving HTML with the GS code.
I have a google sheet, that, when opened, provides a pop-up for users to view some data. I have a script that within the html file that I would like to link to an external page. For example, consider this line of code in a text
document.getElementById("id1").innerHTML = 'Visit Google!';
In the small GUI window that is provided, if I left click the link, the GUI goes blank (white), and nothing else seems to happen. However, if I right click and open the link in a new page, it works fine.
Here is my question:
Why can I not left click to open the link?
Side question (I can post this separate if it is better etiquette on this site): Is there a way to increase the size of the GUI window provided by my google script? Or perhaps even open up the data in a new page with the html?
update: Stub for serving the html:
function openDialog() {
var html = HtmlService.createHtmlOutputFromFile('TeacherView')
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
SpreadsheetApp.getActive().show(html);
}
Thanks,
Jordan

Include the target="_blank" tag in the <a>.
Insteado of using show, use showModalDialog or showModelessDialog.