Pop up widget through script

Question

I am looking forward to create a popup window, see the attached screenshot.

Details: - Anyone can add this pop up to their website using a script, that i will share. - This script/pop up will be later used in the chat application that i am creating

Issues: How do i create this pop up windows script and share this script with other users incase they want to add this pop up to their website.

My question is for the UI part(pop up) and not how the chat will work.

First you write script and publish it at your website then give your link or create an html and tell your users to iframe given url by you — sertsedat, Aug 10 '16 at 15:32
Hi Karthick, I am looking solution for the same problem you were having. Did you got any solution? Please share if any... — Saravana Kumar, Apr 19 '18 at 14:53

score 2 · Answer 1 · answered Feb 15 '16 at 09:39

2

I am just providing the layout alone which dynamically creates an iframe in an existing html page. using which you can add you contents.

<html>
<head>
</head>
<body>
</body>
<script>
var ifrm = document.createElement("iframe");
ifrm.style="width: 280px; max-height: 100%; height: 338px; position: fixed; bottom: 0px; right: 3px; text-align: left; z-index: 2147483647; border: 0px none; border-radius: 4px 4px 0px 0px; box-shadow: 0px 0px 5px  rgb(51, 51, 51);";
document.body.appendChild(ifrm);
</script>    
</html>

answered Feb 15 '16 at 09:39

Sunil Bharath

206
1
7

I am looking out for a script through which i can reference this popup on some other website. So the website where popup is showing will only have script link. Just like Zopim, to integrate zopim on your website you need to insert there script on your website through which popup gets generated – Sengottaian Karthik Feb 15 '16 at 10:00
I think that what @sunil meant that the script only open an `iframe` with your app URL (zopim uses `iframe` too). – Mosh Feu Feb 15 '16 at 10:57

score 0 · Answer 2 · answered Feb 15 '16 at 08:12

here is a basic popup I've create for Login:

xyz.js

$(document).ready(function() {
    loginDialog = $( "#loginDialog" ).dialog({
        autoOpen: false,
        title: "Login Form ",
        height: 300,
        width: 450,
        modal: true,
    });
});

function loginPopup(){
    loginDialog.dialog( "open" );
}

function popupEvent(action){
    if(action=="login"){
        customerLogin();
        loginDialog.dialog( "close" );

    }else if(action=="close"){
        loginDialog.dialog( "close" );
    }

}

ABC.jsp

<a onclick="loginPopup();"> Login</a>

<div id="loginDialog" title="Basic dialog">
    <form id="customerLoginData">
        Email :<input type="text" name="customerEmail" />
        Password: <input type="password" name="customerPassword" />
<a id="popupLogin" onclick="popupEvent('login');"> click to Login </a>

        </form>
       </div>

If you look at such chat widgets like Zopim etc, the companies give you only widget link and not full HTML style to include on the page. How can i create such script to share with others like Zopim? — Sengottaian Karthik, Feb 15 '16 at 09:03

Pop up widget through script

2 Answers2