doorbell反馈插件使用教程

向右看齐 2022-08-19 05:59 197阅读 0赞

# 用户信息反馈 #

效果图：

![Center][]

直接上代码：

<!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>doorbell实例</title>
    <link rel="stylesheet" href="bootstrap/3.3.0/css/bootstrap.min.css" type="text/css" />
    <link rel="stylesheet" href="alertify/0.3.12/css/alertify-bootstrap.css" type="text/css" />
    <script type="text/javascript" src="jquery/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="bootstrap/3.3.0/js/bootstrap.min.js"></script>
    <script type="text/javascript">
    	// 设置反馈路径
    	function shareViaEmail() {
    		$.get('/social/inviteCode', function(response) {
    			if(response.indexOf('Failed') == 0)
    				alertify.error(response);
    			else { //send email with invitecode
    				document.location.href = "" + response; // http后面接的是路径
    			}
    		});	
    	}
    	
    	// 初始化doorbell
    	window.doorbellOptions = {
    		hideEmail:false,
    		email:"",
    		hideButton: true,
    		strings: {
    			'title': 'Hi, doorbell item,'
    		},
    		onSuccess: function(){
    			var email = $('#doorbell-email').val();
    			var content = $('#myTextarea').val();
    			alertify.success('content:'+content);
    			alertify.success('email:'+email);
    			
    		},
    		appKey: '自己申请'
    	};
    	
    	// 调用doorbell.js
    	(function(d, t) {
    		var g = d.createElement(t);g.id = 'doorbellScript';g.type = 'text/javascript';g.async = true;g.src = 'https://embed.doorbell.io/button/2278?t='+(new Date().getTime());(d.getElementsByTagName('head')[0]||d.getElementsByTagName('body')[0]).appendChild(g);
    	}(document, 'script'));
    
    	// 执行展示
    	function showDoorbellModal() {
    		doorbell.show(); // The doorbell object gets created by the doorbell.js script
    	}
    </script>
    </head>
    <body>
      <button type="button" οnclick="showDoorbellModal();">Show Doorbell form</button>
    </body>
    </html>

第三方资源请读者自行准备。

个人主页：[http://www.itit123.cn/][http_www.itit123.cn] 更多干货等你来拿

更多内容参考：[https://doorbell.io/docs/javascript][https_doorbell.io_docs_javascript]

[Center]: /images/20220731/7b6a133ebfc645fea23e6ba3a200f130.png
[http_www.itit123.cn]: http://www.itit123.cn/
[https_doorbell.io_docs_javascript]: https://doorbell.io/docs/javascripthttp://