Step 1:
First Create a twilio account sign up and go to my first twilio account and get twilio mobile number.
https://console.twilio.com/
Step 2:
Second Create a Magic Bell account sign up and crate one project and get API key and secrets Key.
https://www.magicbell.com/
Go to Setting -> General
_Layout.cshtml
<li class="nav-item">
<div id="notifications-inbox" style="display: inline-block" />
</li>
JS file Added
MagicBell.JS
$(document).ready(function () {
(function (i, s, o, g, r, a, m) {
i['MagicBellObject'] = r; (i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments);
}), (i[r].l = 1 * new Date()); (a = s.createElement(o)), (
m = s.getElementsByTagName(o)[0]); a.async = 1; a.src = g; m.parentNode.insertBefore(a, m);
})(window, document, 'script', `https://unpkg.com/@magicbell/embeddable/dist/magicbell.min.js`, 'magicbell');
var target = document.getElementById('notifications-inbox');
var options = {
apiKey: "a332593a3bc8b576d218ffed12bb01eb732f55f3",
//userEmail: "xxxxxxxxxxxx@gmail.com",
userEmail: $('#Email_ID').val(), //"xxxxxxxxxxxx@gmail.com",
onNotificationClick: function (notification) {
if (notification.actionUrl) window.open(notification.actionUrl, '_self');
},
height: 500,
theme: { "icon": { "borderColor": "#5225C1", "width": "24px" }, "banner": { "fontSize": "14px", "backgroundColor": "#F8F5FF", "textColor": "#3A424D", "backgroundOpacity": 1 }, "unseenBadge": { "backgroundColor": "#F80808" }, "header": { "fontSize": "15px", "backgroundColor": "#FFFFFF", "textColor": "#5225C1", "borderRadius": "16px" }, "footer": { "fontSize": "15px", "backgroundColor": "#FFFFFF", "textColor": "#5225C1", "borderRadius": "16px" }, "notification": { "default": { "fontSize": "14px", "textColor": "#3A424D", "borderRadius": "16px", "backgroundColor": "#FFFFFF", "hover": { "backgroundColor": "#F2EDFC" }, "state": { "color": "transparent" }, "margin": "8px" }, "unseen": { "textColor": "#3A424D", "backgroundColor": "#F8F5FF", "hover": { "backgroundColor": "#F2EDFC" }, "state": { "color": "#5225C1" } }, "unread": { "textColor": "#3A424D", "backgroundColor": "#F8F5FF", "hover": { "backgroundColor": "#F2EDFC" }, "state": { "color": "#5225C1" } } } },
locale: "en",
};
magicbell('render', target, options);
})
Notification.JS
function Notification() {
const headers = {
'X-MAGICBELL-API-SECRET': 'jdt2x+ISB0IbQvijwmGv5o8YHwfBddnMdIdZswZf',
'X-MAGICBELL-API-KEY': 'a332593a3bc8b576d218ffed12bb01eb732f55f3',
};
var Email = $('#txtEmail').val();
const data = {
notification: {
title: 'Sample Test Mail',
content: 'Hello, This is Sample Tested Mail for you..',
category: 'Test_Mail',
//action_url: 'https://magicbell.com/pricing',
recipients: [{ email: Email }, {email: 'xxxxxxxxxxx@gmail.com' }],
},
};
axios.post('https://api.magicbell.com/notifications', data, { headers });
function Login(e) {
var isValid = true;
// All Form Validation
//if ($("#UserName").val() == "") {
// toastr.error("UserName can not be Blank...");
// $("#UserName").focus();
// event.preventDefault();
// return;
//}
//else if ($("#UserPassword").val() == "") {
// toastr.error("Password can not be Blank...");
// $("#UserPassword").focus();
// event.preventDefault();
// return;
//}
const forms = document.querySelectorAll('.requires-validation')
Array.from(forms)
.forEach(function (form) {
if (form.checkValidity() === false) {
event.preventDefault()
event.stopPropagation()
isValid = false;
}
form.classList.add('was-validated')
})
if (isValid) {
$.ajax({
type: "GET",
url: "/Account/Login_GetData",
async: false,
dataType: "json",
//contentType: "application/json; charset=utf-8",
data: { "user_name": $("#UserName").val(), "password": $("#UserPassword").val() },
success: function (data) {
var result = data.List_Data;
if (result != null && result != undefined) {
if (data.List_Data.DTab_User_Msg.includes('Login Successfully') == true) {
result.DTab = JSON.parse(result.DTab);
window.location.href = '/Account/Registred_User_List';
const data = {
notification: {
title: 'Welcome to MagicBell',
content: 'The notification inbox for your product. Get started in minutes.',
category: 'signup',
action_url: 'https://developer.magicbell.com',
recipients: [
{
email: 'xxxxxxxxxxxxx@gmail.com'
}
],
overrides: {
providers: {
postmark: {
Tag: 'signup',
Headers: {
'X-Original-To': 'xxxxxxxxxxxxx@gmail.com'
}
}
}
}
}
}
}
else {
toastr.warning(data.List_Data.DTab_User_Msg);
//Swal.fire(json.msg, '', 'info')
}
}
},
error: function () {
toastr.warning("Error occured!!");
}
});
}
event.preventDefault();
}
Cs File function added
[HttpGet]
public async Task<JsonResult> Login_GetData(string user_name, string password)
{
try
{
List<Register> Login = new List<Register>();
DataTable User_Data = new DataTable();
Conn.Open();
SqlCommand cmd = new SqlCommand("User_Login_GatData", Conn);
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.AddWithValue("@user_name", user_name);
cmd.ExecuteNonQuery();
SqlDataAdapter Da = new SqlDataAdapter(cmd);
Da.Fill(User_Data);
Conn.Close();
if (User_Data.Rows.Count > 0)
{
string pass = EncryptionHelper.Decrypt(User_Data.Rows[0]["password"].ToString());
if (pass == password)
{
var UserList = User_Data.AsEnumerable().Select(dataRow => new Register
{
user_name = dataRow.Field<string>("user_name"),
password = dataRow.Field<string>("password")
});
var User_List_Data = JsonConvert.SerializeObject(UserList);
Session["user_id"] = User_Data.Rows[0]["user_id"].ToString();
Session["user_name"] = user_name;
Session["designation_name"] = User_Data.Rows[0]["designation"].ToString();
Session["user_image"] = User_Data.Rows[0]["image_path"].ToString();
Session["email"] = User_Data.Rows[0]["email_id"].ToString();
await SendMail(User_Data.Rows[0]["email_id"].ToString());
var List_Data = new
{
DTab = User_List_Data,
DTab_User_Msg = "Login Successfully"
};
return Json(new
{
//DTab_User_Data = User_List_Data,
List_Data
//DTab_User_Msg = "Login Successfully"
}, JsonRequestBehavior.AllowGet);
}
else
{
var UserList = User_Data.AsEnumerable().Select(dataRow => new Register
{
user_name = dataRow.Field<string>("user_name"),
password = dataRow.Field<string>("password")
});
var User_List_Data = JsonConvert.SerializeObject(UserList);
var List_Data = new
{
DTab = User_List_Data,
DTab_User_Msg = "Password InCorrect Please Check...."
};
return Json(new
{
List_Data
}, JsonRequestBehavior.AllowGet);
}
}
else
{
var User_List_Data = "";
return Json(new
{
DTab_User_Data = User_List_Data,
DTab_User_Msg = "User are not exists..Please first register your name...."
}, JsonRequestBehavior.AllowGet);
}
}
catch (Exception ex)
{
return Json(new
{
msg = "Error occurred.Error details: " + ex.Message
});
}
}
static async Task SendMail(string Email)
{
//Email Notification
using (var httpClient = new HttpClient())
{
using (var request = new HttpRequestMessage(new HttpMethod("POST"), "https://api.magicbell.com/notifications"))
{
request.Headers.TryAddWithoutValidation("accept", "application/json");
request.Headers.TryAddWithoutValidation("X-MAGICBELL-API-SECRET", "jdt2x+ISB0IbQvijwmGv5o8YHwfBddnMdIdZswZf");
request.Headers.TryAddWithoutValidation("X-MAGICBELL-API-KEY", "a332593a3bc8b576d218ffed12bb01eb732f55f3");
request.Content = new StringContent("{\n \"notification\": {\n \"title\": \"Login Successfully\",\n \"content\": \"<html><head><title></title></head><body><p4 style='color: red;'>You have a Login.</p4></body></html>\",\n \"category\": \"new_message\",\n \"action_url\": \"https://magicbell.com/docs\",\n \"recipients\": [{\n \"email\": \"xxxxxxxxxxx@gmail.com\"\n },{\n \"email\": \"" + Email + "\"\n }],\n \"custom_attributes\": {\n \"order\": {\n \"id\": \"1202983\",\n \"title\": \"A title you can use in your templates\"\n }\n }\n }\n }");
request.Content.Headers.ContentType = MediaTypeHeaderValue.Parse("application/json");
var response = await httpClient.SendAsync(request);
}
}
//SMS Notification
using (var httpClient = new HttpClient())
{
using (var request = new HttpRequestMessage(new HttpMethod("POST"), "https://api.magicbell.com/notifications"))
{
request.Headers.TryAddWithoutValidation("accept", "application/json");
request.Headers.TryAddWithoutValidation("X-MAGICBELL-API-SECRET", "jdt2x+ISB0IbQvijwmGv5o8YHwfBddnMdIdZswZf");
request.Headers.TryAddWithoutValidation("X-MAGICBELL-API-KEY", "a332593a3bc8b576d218ffed12bb01eb732f55f3");
request.Content = new StringContent("{\n \"notification\": {\n \"title\": \"Hobbies\",\n \"content\": \"My Hobbies is Cricket,Chess,Carom etc.\",\n \"category\": \"new_message\",\n \"action_url\": \"https://magicbell.com/docs\",\n \"recipients\": [{\n \"email\": \"xxxxxxxxxxxx@gmail.com\"\n },{\n \"email\": \"" + Email + "\"\n }],\n \"custom_attributes\": {\n \"order\": {\n \"id\": \"1202983\",\n \"title\": \"A title you can use in your templates\"\n }\n }\n }\n }");
request.Content.Headers.ContentType = MediaTypeHeaderValue.Parse("application/json");
var response = await httpClient.SendAsync(request);
}
}
}
