Edit "Your request was successfully submitted" confirmation | Community
Skip to main content

Edit "Your request was successfully submitted" confirmation

  • April 30, 2018
  • 45 replies
  • 0 views

After a customer submits a request you see a "Your request was successfully submitted" confirmation along the top of the page. 

Is there any way of editing it? I would like to change the colours and make the text larger. I can't see anywhere in the code to do this.

Thank you.

45 replies

Vladan
  • April 30, 2018

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!


  • Author
  • April 30, 2018

Hi Vladan

Thank you for the quick response.  

 

This did the job! Awesome. 

 


Vladan
  • April 30, 2018

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?


  • Author
  • April 30, 2018

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;
}

 

 


Vladan
  • April 30, 2018

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;
}

  • Author
  • May 1, 2018

Thank you.

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


Vladan
  • May 1, 2018

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

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

  • Author
  • May 2, 2018

That's great! Problem solved.

Thank you for your help ;)


  • August 7, 2018

Hi there!

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


  • August 10, 2018

Anyone? ;)


  • August 10, 2018

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!


  • August 10, 2018

No problem, thanks Jessie!


  • August 10, 2018

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.");


Vladan
  • August 10, 2018

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
}

  • August 10, 2018

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.


Vladan
  • August 10, 2018

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.


  • August 10, 2018

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!


Vladan
  • August 10, 2018

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


  • August 10, 2018

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


  • November 5, 2018

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";
}

  • November 13, 2018

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? 


  • November 14, 2018

Hi Emma!

Provided you're on the Team plan or above, you'll be able to make changes to the Notify Requester of Received Request trigger. You can find out more about modifying your triggers in this article.


Vladan
  • November 15, 2018

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! 


  • November 15, 2018

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


Justin30
  • January 2, 2019

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