Dynamic Content in Guide Search Placeholder

Hey Matt,

Just follow the given steps :)

1). Make the DC for your hard-coded text.

  I). Select 'Support'.

  II). Then select 'Admin'.

  III). Click 'Go to Admin Center'.

  IV). 'Workspace' in the sidebar > Agent tools > Dynamic Content.

  V). Click 'Add item' 

  VI). Then Create DC. 

  VII).  Now, your variant has been created for the English language.

   VIII). Create a second variant for the French language.

IX). You can create more variants for your dynamic content.

X). Now, copy the DC placeholder.

  2). And, replace it with the hard-coded string. See line no. 12

3). Now, you can test it.

4). Do the same steps for the rest of both hard-coded strings. Create a DC placeholder and replace it.

home_page.hbs

header_page.hbs

How to create DC?

https://support.zendesk.com/hc/en-us/articles/4408882999066-Providing-multiple-language-support-with-dynamic-content

If any queries, feel free to ask.

Thanks

Team

Thank you so much, @ifra !

I'm still running into an issue where the search bar disappears entirely when I use the dynamic content placeholder instead of a hard coded string. Any idea where I'm going wrong?

Hey Matt,

Is the DC placeholder working for other places like the header and header search bar? If yes, then copy that same placeholder and paste it to your main search-bar placeholder then test and let me know.

I tested it,

and it's working.

Thanks

Hi Again, @ifra

I see the same thing when I try using that dynamic content placeholder in the top search bar. I also tried creating a unique dynamic content placeholder for the top search bar. The result was the same: the search bar was no longer there.

Appreciate any other ideas you may have!

Hello Matt :),

Second idea is, add translation manually using JS. Also, I have third idea but you don't have language selector. 

Follow the below steps:-

Copy the below JS code and add it to your script.js file. In this, I'm checking the locale and add the placeholder translation manually.

  $(document).ready(function() {
    if (window.location.href.indexOf("en-us") > -1) {

      $(".search.search-full #query").attr('placeholder', 'Hello Matt');
    
      } else if (window.location.href.indexOf("ar") > -1) {
     
      $(".search.search-full #query").attr('placeholder', 'مرحبا مات');
     
       } else if (window.location.href.indexOf("fr") > -1) {
     
    $(".search.search-full #query").attr('placeholder', 'Bonjour Matt');
    }
  });




Screenshot for the same:

You only need to add the language symbol to check.

if (window.location.href.indexOf("en-us") > -1) {

en-us - For English 

 $(".search.search-full #query").attr('placeholder',  'Hello Matt');

else if (window.location.href.indexOf("ar") > -1) {

ar - For Arabic

$(".search.search-full #query").attr('placeholder', 'مرحبا مات');

else if (window.location.href.indexOf("fr") > -1) {

fr - For Fench

$(".search.search-full #query").attr('placeholder', 'Bonjour Matt');

Same you need to follow for all your HC languages and add translation manually as I did in above code.

Code length would be increase when you add more placeholder's translation. I write the code only for three languages.

To get the all languages symbol:

https://support.zendesk.com/hc/en-us/articles/4408821324826-Zendesk-language-support-by-product#h_01EYXD488X3XK23TG9VPG0W6KS

And if any query or confusion feel free to ask :), then I'll share third idea.

Thanks