如何整合嵌入angular的调查猴子网站

Question

I have survey monkey account, which have multiple surveys, i want to add this website embed survey in my angular website which have bootstrap and jquery already added. I tried with direct script in html component but its not working.

<script>(function(t,e,s,n){var o,a,c;t.SMCX=t.SMCX||[],e.getElementById(n)||(o=e.getElementsByTagName(s),a=o[o.length-1],c=e.createElement(s),c.type="text/javascript",c.async=!0,c.id=n,c.src=["https:"===location.protocol?"https://":"http://","widget.surveymonkey.com/collect/website/js/kjhasdkhkkjhk324234hkjhaksdkadhk.js"].join(""),a.parentNode.insertBefore(c,a))})(window,document,"script","smcx-sdk");</script>

Also i want to set this "widget.surveymonkey.com/collect/website/js/kjhasdkhkkjhk324234hkjhaksdkadhk.js" url dynamically added.

Like this

var url = "widget.surveymonkey.com/collect/website/js/kjhasdkhkkjhk324234hkjhaksdkadhk.js";
<script>(function(t,e,s,n){var o,a,c;t.SMCX=t.SMCX||[],e.getElementById(n)||(o=e.getElementsByTagName(s),a=o[o.length-1],c=e.createElement(s),c.type="text/javascript",c.async=!0,c.id=n,c.src=["https:"===location.protocol?"https://":url].join(""),a.parentNode.insertBefore(c,a))})(window,document,"script","smcx-sdk");</script>

Thank you in advance.

Answer 1

I faced the same issue with the script and this is how I managed to integrate the survey monkey embed script in my angular application.

In component.html

<div  id="smcx-sdk"> </div>

In component.ts

ngAfterViewInit(){
  var script = document.createElement('script');
  script.src = "http://<replace your widget url>";
  document.getElementById("smcx-sdk").appendChild(script);
}

Make sure the element's id is "smcx-sdk".

Hope this helps.