Edit "Your request was successfully submitted" confirmation

Hi Darren, to edit text size//color just add these CSS snippets at the end of your current CSS file:

span.notification-text {
 font-size: 19px !important;
 color: red !important;
}

To edit popup color, use this CSS:

.notification-notice {
 background: red !important;
 border-color: red !important;
}

Hope this helps!

Hi Vladan

Thank you for the quick response.  

This did the job! Awesome. 

Hey, is it at the bottom of your CSS? 

This seems unnecessary https://cl.ly/rEY3

Could you share with me link to your HC so I can take a look?

Are you using the Copengahen theme?

Yes that was the issue. I removed it and it worked. Cheers!

Sorry one more thing. Is there a way of also changing the size and color of the X which dismisses the confirmation?

I thought it might be something like:

.notification-dismiss {
font-size: 15px;
color: #FFFFFF;
}

Hi Darren, Glad to hear it works! About the X btn, try this one:

.notification-notice .notification-icon::before {
 border-color: transparent !important;
 font-size: 23px !important;
color: red;
}

Thank you.

Tried that and that seems to only change the tick icon.

Ahhh sorry, I missed that you need X icon, so here it is:

.notification-dismiss::before {
 color: red;
}

That's great! Problem solved.

Thank you for your help ;)

Hi there!

Is it possible to adjust the "Your request was successfully submitted"-text? Maybe even using Dynamic Content?

Anyone? ;)

Hey Leon!

I pinged out Community Moderators about this yesterday but forgot to include the link! I've re-pinged them, so hopefully one of them will be able to hop over here and help you out!

No problem, thanks Jessie!

Hey Leon,

Not sure if this will work in your particular use case, but I was able to edit the text by putting the following line in my script.js file:

$(".notification-text").html("Thank you for your request! A coach will be in touch with you shortly.");

Hey Frankie, welcome to the Community!

Your code will work for sure but note just one thing, this element (.notification-text) in some cases can notify about unsuccessful sending a msg. So, it would be better if in this JS code we have a condition if .notification-text contains "successfully" then -> your code. 

Hope this helps. 

if ($('span.notification-text:contains("successfully")').length > 0) {
   $('span.notification-text').text("Your custom text...");
   //any other custom stuff
}

Thanks Frankie!

Thanks Vladan! I will look into this, but how would this work when supporting multiple languages? Hence my initial question about Dynamic Content.

Hey Leon, sure, here is the code if using a DC item.

<script>
if ($('span.notification-text:contains("successfully")').length > 0) {
 $('span.notification-text').text("{{dc 'DC-ITEM-NAME'}}");
 //any other custom stuff
}
</script>

You put this code at the end of your Footer or Header.
Don't forget to replace the DC item name from my code. ;)
Let us know how it goes.

Looks good, I will look into this with a more tech-savvy colleague after the weekend and let you know if anything comes up. Many thanks Vladan!

You are welcome, Leon! Looking forward to the feedback from you/your team!

Thank you, Vladan! That makes sense and have updated my code accordingly!

Hello everyone!

I'm unable to see that pop-up after submitting a ticket. I can't find anything like "notification" inside my script.js and script.css.

I can't find anything even inside the original Copenhagen theme.

Can someone please help me?

All I can find inside style.css is:

.icon-notification-alert::before {
 content: "\26A0";
}

.icon-notification-error::before {
 content: "\00D7";
}

.icon-notification-info::before {
 content: "\2139";
}

.icon-notification-success::before {
 content: "\2714";
}

Anyone know if it's possible to change the text of the message and put the person's ticket ID in the text? i.e. "We’ve received your support ticket (#####)!"

Additionally, is it possible to change the look of the check mark to make it bigger/a different color? 

Emma meant on the top help center notification, right?

If yes, that text can be changed, it's doable with a help of Javascript but you will need JS dev for that task.
But I don't think it's possible to put the ticket ID.

Color/Size of the icon, just put this at the end of your CSS file and replace "red" with your color.

.notification-notice .notification-icon::before {
 border-color: red;
 font-size: 30px;
 color: red;
 width: 40px;
 height: 40px;
 line-height: 40px;
}

Hope this helps! 

Hi Vladan - thanks, yes that's what I meant! Appreciate the help! 

Is it possible to customize the confirmation text depending on form(s) and/or ticket field selections?

Hey Justin, yes that should be doable but some JS coding is needed.

One way how that can be achieved:

- if URL contains XZY - XYZ is the form ID

- then set local storage eg form = XYZ

Then, if local.storage == XYZ => do the rest what's needed - change the text.

Hope this helps. 

@vladan, quick question: 

Do you know if the ".notification-text" is localized? Or does it change when the HC language is changed?  

We have a script with this logic to determine if we should show a section: 

<script>
if ($(".notification-text").length)
      if ($(".notification-text").html().indexOf("Your request was successfully submitted.") > -1) $(".new-request-sent").addClass("show");
</script>

We're noticing that this section is not appearing in our help centers when different languages are set, but only when english is set. 

Hey Danny! I think it depends on language, not all langs are fully supported. 
Just tested with German, and it is translated. 
https://cl.ly/ce6d987a06aa
"Ihre Anfrage wurde erfolgreich eingereicht. "
Hope this answers to your question! 

@Danny Cohen, it's probably behaving this way because you are using 'indexOf("Your request was successfully submitted.")' which will work only for English and not for other languages as the text is localized resulting, the condition fails for other languages.

Team Diziana