Pop up widget through script

Asked 15/2, 2016 at 6:50 Answered 15/2, 2016 at 9:39

javascript jquery user-interface chat livechat

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.

Deplete answered 15/2, 2016 at 6:50 Comment(2)

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 – Elzaelzevir 10/8, 2016 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... – Lilianaliliane 19/4, 2018 at 14:53

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>

Draftee answered 15/2, 2016 at 9:39 Comment(2)

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 – Deplete 15/2, 2016 at 10:0

I think that what @sunil meant that the script only open an iframe with your app URL (zopim uses iframe too). – Minard 15/2, 2016 at 10:57

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>

Peony answered 15/2, 2016 at 8:12 Comment(1)

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? – Deplete 15/2, 2016 at 9:3

Recommended topics

Hot tags