web forms popup

[zowwie85]

Hi, I'm running VERSION: 2.14-687a
BUILD: 180908-1618
© 2018 ViciDial Group, on a server installed from ViciBox_v8.x86_64-8.0.1.iso

It's on a virtual box, specs as follows -

CPU:
2 vCore
RAM:
4096 MB
Storage:
60 GB SSD

This isn't a performance issue, it works great. I'm trying to figure out how to dynamically pop up a google map based on the information in the active call when the agent clicks the web form button. I don't want to modify the app or database at all if I can help it either.

I'm pasting this block of code into the web form field. When the web form button is clicked it winds up taking the user to http://vicdialIPaddress/agc.... (and then all of the code after)

Code: Select all

<script language="javascript">

function newSite() {
    var siteroot="https://www.google.com/maps/search/?api=1&map_action=pano";
    var customer_address="--A--address1--B-- --A--city--B--,--A--state--B-- --A--postal_code--B--";
    var customer_address_URIcoded=encodeURI(customer_address);
    var fullURL=siteroot+"&query="+customer_address_URIcoded;
    document.getElementById('myIframe').src = fullURL;
}
</script>
<iframe id="myIframe" src="http://www.somesite.net/favicon.ico" onLoad="newSite();"></iframe>


I tried it the other way around in case the app is expecting the iframe tag first, but that crashes the load of the agent session.

Code: Select all

<iframe id="myIframe" src="http://www.somesite.net/favicon.ico" onLoad="newSite();">
    <script language="javascript">

function newSite() {
    var siteroot="https://www.google.com/maps/search/?api=1&map_action=pano";
    var customer_address="--A--address1--B-- --A--city--B--,--A--state--B-- --A--postal_code--B--";
    var customer_address_URIcoded=encodeURI(customer_address);
    var fullURL=siteroot+"&query="+customer_address_URIcoded;
    document.getElementById('myIframe').src = fullURL;
}
</script>
</iframe>

The goal is to build a URI-encoded representation of the customer's address and pass that to google maps as one URL in a new window.

It took me a day to setup an "extension" that I can transfer an answering machine call to, thought this problem would be equally straightforward but I'm kind of stumped.
(edit - remove identifying domain name)

[williamconley]

Excellent job posting your specs. You've earned a response (and likely the only one I'm doin' today, lol).

1) Don't post javascript into the web form. It's just for the creation of a URL.

2) If you MUST javascript, look at the options.php examples that allow loading of javascript into the agent screen without altering the Vicidial code.

3) But: If your goal is merely to create a URL that dumps the user into a google map with appropriate data from the Prospect record, you were pretty close but overcomplicating it entirely. You obviously know too much about web design (or too little?) and this system is coded for those who know NOTHING about web design and either use the Script tab or Web Form button to pull a whole new page. So step back a bit and consider using this as a script (look at the example scripts that are already there):

Code: Select all

<iframe src="https://www.google.com/maps/search/?api=1&map_action=pano&customer_address=--A--address1--B--%20--A--city--B--%20--A--state--B--%20--A--postal_code--B--" style="background-color:transparent;" scrolling="auto" frameborder="0" allowtransparency="true" id="popupFrame" name="popupFrame"  width="--A--script_width--B--" height="--A--script_height--B--" STYLE="z-index:17"> </iframe>

Alternately, you can use this as a web form:

Code: Select all

https://www.google.com/maps/search/?api=1&map_action=pano&customer_address=--A--address1--B--%20--A--city--B--%20--A--state--B--%20--A--postal_code--B--

4) But to be clear: You can't Pop up a new page and attempt to load a new iframe in the new page at google. Google controls the new page upon popup, so that won't work. And the web form does not pop up in an iframe, and can't be controlled by requiring that it have an iFrame in it after it's generated, the new page can send information back to the originating page, but the originating page has NO control over the new page. So you can put your code in a Script which will put google in an iFrame, which can be limited in size allowing you full use of the remaining real estate WITHIN the script (which is a small area), or you can create a whole new PHP page (outside Vicidial, safe from upgrades) and do whatever you want on it. But you can't do it the way you were trying.

And remember: When you request a new page, in or out of an iFrame, you have NO control over the content of that page unless you are actually coding that page. Thus if you put "WebGuru.php" in as the page, you can put code in /srv/www/htdocs/agc/WebGuru.php to control what pops up in that page. That page can Accept GET and POST values and make decisions on what to show the end user, but only that page can make those decisions.

[mflorell]

The Web Form buttons are for URLs only, not for code snipets. VICIdial will URL-encode the variables for you, you just need to included them in the URL string:

https://www.google.com/maps/search/--A- ... state--B--

[zowwie85]

Code: Select all

https://www.google.com/maps/search/?api=1&map_action=pano&query=--A--address1--B--%20--A--city--B--%20--A--state--B--%20--A--postal_code--B--

That did the trick ultimately. I didn't think to just insert the %20's on my own in between the variables and wasn't sure if the outputs would be urlcoded.

But that did exactly what I needed. I know enough about web development to be dangerous and was going down that script path because I thought it would be the best way to get myself a valid URL.

Based on that I'm pretty sure I can adapt what I learned to making the second button hit another external site -many, many, many thanks!

[mflorell]

Thanks for posting a followup!