최근 검색

최근 검색 없음

Nico Bruning's Avatar

Nico Bruning

가입한 날짜: 2023년 11월 30일

·

마지막 활동: 2024년 1월 18일

팔로잉

0

팔로워

0

총 활동 수

9

투표 수

2

플랜 수

3

활동 개요

님의 최근 활동 Nico Bruning

Nico Bruning님이 에 댓글을 입력함

커뮤니티 댓글 Discussion - Tips and best practices from the community
커뮤니티

Matt Farrington Smith cool that you like it.
The basic idea came from this: https://codepen.io/leetech/pen/dOOgBx 

If you want to change the speed, look for the 

setInterval(typeIt, 100)

function. The second parameter is the time in Milliseconds.

You could introduce a const for the typing speed like

const typingSpeed = 100 //change this number to your liking

 just at the top, where the other consts are introduced and then change the function to

setInterval(typeIt, typingSpeed)

This way you can change the speed from a central place and you and your colleagues can improve the readability. 

Hope this helps.

댓글 보기 · 2024년 1월 18일에 게시됨 · Nico Bruning

0

팔로워

0

투표 수

0

댓글

Nico Bruning님이 에 게시물을 만듦

게시물 Discussion - Tips and best practices from the community
Typing animation / typewriter effect for placeholder of homepage search bar

What we wanted to achieve: When users land on our zendesk homepage the focus should lie on the search field. Sometimes you do not exactly know what you can search for. In our searchbar we wanted users to get suggestions for useful search questions. To make it extra fancy those suggestions should have a typewriter effect to appear as being typed out in real time.

What you need: a little bit of time and ideally dynamic content enabled, but you could also hardcode the placeholders if you don't use multi language support. 

 

How to do it: If you want to use dynamic content for the placeholders, you should create those  first (Admin Center -> Agent Tools -> Dynamic Content).

We created three different placeholders and named them search placeholder 1/2/3 so we can use them with the dynamic content helper like

{{dc 'search_placeholder_1')

 

If you are not using dynamic content you can skip step 1.

1.

In your document_head.hbs add the following lines after the first tag:



 

2.

Now for the cool stuff add the following lines at the end of your script.js file:

window.addEventListener("load", () => {
    const search = document.querySelector("input[type='search']");
    const searchForm = document.querySelector("form.search-full");
    const defaultPlaceholder = search.getAttribute('placeholder');
    const placeholderElements = [
        document.querySelector('meta[name="search-placeholder-one"]'),
        document.querySelector('meta[name="search-placeholder-two"]'),
        document.querySelector('meta[name="search-placeholder-three"]')
    ];
    const placeholders= placeholderElements
        .map(element => element ? element.getAttribute('content') : null)
        .filter(content => content !== null);

    let currentPlaceholderIndex = 0;
    let currentPlaceholderCharacter = 0;
    let interval;
    const delayBetweenPlaceholders = 1000;

    if (searchForm) {
        search.focus();
        search.setAttribute('placeholder', '');

        let typeIt = function() {
            currentPlaceholderCharacter++;
            let typedOut = placeholders[currentPlaceholderIndex].substring(0, currentPlaceholderCharacter);
            search.setAttribute('placeholder', typedOut);

            if (currentPlaceholderCharacter === placeholders[currentPlaceholderIndex].length) {
                currentPlaceholderCharacter = 0;
                currentPlaceholderIndex++;

                if (currentPlaceholderIndex >= placeholders.length) {
                    setTimeout(function() {
                        search.setAttribute('placeholder', defaultPlaceholder);
                    }, delayBetweenPlaceholders);

                    clearInterval(interval);
                } else {
                    // If not last placeholder, stop the current interval and set a new one after a delay.
                    clearInterval(interval);
                    setTimeout(function() {
                        interval = setInterval(typeIt, 100);
                    }, delayBetweenPlaceholders);
                }
            }
        };
        // Start typing the placeholders.
        interval = setInterval(typeIt, 100);
    }
});

 Again, if you do not use dynamic content you can delete this part

const placeholderElements = [
document.querySelector('meta[name="search-placeholder-one"]'),
document.querySelector('meta[name="search-placeholder-two"]'),
document.querySelector('meta[name="search-placeholder-three"]')
];
const placeholders= placeholderElements
.map(element => element ? element.getAttribute('content') : null)
.filter(content => content !== null);

and just use hardcoded strings as placeholders instead:

const placeholders = [
 "This will be typed out first",
 "This placeholder will be typed second",
 "And this at last",
];
 And that's it. Check your live preview and see the magic happen :)     
     

2024년 1월 03일에 편집됨 · Nico Bruning

3

팔로워

5

투표 수

4

댓글

Nico Bruning님이 에 댓글을 입력함

커뮤니티 댓글 Discussion - Tips and best practices from the community
커뮤니티

Hi, does anyone know if it is possible to overwrite the translations for 'content_tags_label' ?

'Related to' in english might be fine, but the german translation 'Verknüpfung mit' is not really nice and instantly understandable for the reader. But this translation is not included in the manifest.json

댓글 보기 · 2023년 11월 30일에 게시됨 · Nico Bruning

0

팔로워

0

투표 수

0

댓글

Nico Bruning님이 에 댓글을 입력함

댓글Arbeiten mit Beiträgen in der Wissensdatenbank
Produkt-Guides

Is it possible to overwrite the translations for 'content_label_tag' ?

'Related to' in english might be fine, but the german translation 'Verknüpfung mit' is not really nice and instantly understandable for the reader.

댓글 보기 · 2023년 11월 30일에 편집됨 · Nico Bruning

0

팔로워

0

투표 수

0

댓글