Edit "Your request was successfully submitted" confirmation

Beantwortet

45 Kommentare

  • Vlad
    Community Moderator
    The Wise One - 2022

    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!

    0
  • Darren Taylor

    Hi Vladan

    Thank you for the quick response.  

     

    This did the job! Awesome. 

     

    0
  • Vlad
    Community Moderator
    The Wise One - 2022

    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?

    0
  • Darren Taylor

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

     

     

    0
  • Vlad
    Community Moderator
    The Wise One - 2022

    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;
    }
    0
  • Darren Taylor

    Thank you.

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

    0
  • Vlad
    Community Moderator
    The Wise One - 2022

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

    .notification-dismiss::before {
    color: red;
    }
    0
  • Darren Taylor

    That's great! Problem solved.

    Thank you for your help ;)

    0
  • Leon van Klink

    Hi there!

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

    0
  • Leon van Klink

    Anyone? ;)

    0
  • Jessie Schutz
    Zendesk Customer Care

    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!

    0
  • Leon van Klink

    No problem, thanks Jessie!

    0
  • Frankie Snavely

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

    0
  • Vlad
    Community Moderator
    The Wise One - 2022

    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
    }
    0
  • Leon van Klink

    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.

    0
  • Vlad
    Community Moderator
    The Wise One - 2022

    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.

    0
  • Leon van Klink

    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!

    0
  • Frankie Snavely

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

    0
  • Julio A.

    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";
    }
    0
  • Emma

    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? 

    0
  • Jessie Schutz
    Zendesk Customer Care

    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.

    0
  • Vlad
    Community Moderator
    The Wise One - 2022

    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! 

    0
  • Emma

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

    0
  • Justin

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

    0
  • Jessie Schutz
    Zendesk Customer Care

    Hi Justin!

    The confirmation page template isn't available for editing in the Guide editor, but it might be possible to do with Javascript...I'll check with the Community moderators to see if they have any ideas.

    0
  • Vlad
    Community Moderator
    The Wise One - 2022

    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. 

    0
  • Danny Cohen

    @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. 

    0
  • Vlad
    Community Moderator
    The Wise One - 2022

    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! 

    0
  • Trapta Singh
    Community Moderator
    Zendesk Luminary

    @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

    0
  • Danny Cohen

    Thanks for the help everyone! I was able to manually find all the strings in all the languages enabled using the inspect tool in Chrome. 

    I was just hoping that there was a key for this phrase in the t (translation) helper for the Help Center. 

    0

Bitte melden Sie sich an, um einen Kommentar zu hinterlassen.

Powered by Zendesk