TypeIt works on Wix website?

Ask the community
,
1

Have any of you use TypeIt?

I want to use it for a website from a client of mine, but I need to know if I am able to integrated to the website.

Thanks!

2

Try the Typewriter example.

3

Thank you, but do they offer multiple "strings that replaces each other?

4

“They” is actually “me”. And yes, multiple strings can be used. You can load the example template in your editor, see the complete code, play with it, change it, and make it do whatever you want.

5

My apologies
I do not see where I can add multiple strings
I am not a expert coder, so just need a little hand about how to create the multiple strings
Thank you

6

You can change the contents of typeStr which is the variable that holds the string to "type’. Keep your strings in an array and change them when you want:

let strings = [
    'string to be typed',
    'yet another string',
    'and yet another string',
    'and this is the last one'
];

let typeStr = strings[2];  // get the third string to "type"
7

I am sorry, but like I said I no expert coder. I am getting an error.

So where in exactly in this code, do I need to put the code you wrote above?
How do I start with a word and then rest of the strings go and then in a loop
Sorry, I appreciate your help

import wixData from ‘wix-data’;

let interval;
let timeInterval = 300;
let typeStr = “typing.”;
let typeIdx;
let htmlStr = ‘’;
let displayStr;

$w.onReady( function () {

// Get the original html string, and split it into two pieces.
// In the process, remove the separator !##!
// By saving the original html, we preserve the style of the text to display.
if (htmlStr.length === 0) { // just get the original html text the first time
htmlStr = $w(“#typewriterPage”).html;
}
$w(“#typewriterPage”).html = ‘’; // don’t show the original text
let strPieces = htmlStr.split(“!##!”);

displayStr = ''; // init string that we will "type" to 
typeIdx = 0; // start at beginning of string we want to "type"

// Declare an interval function that will run in the background.
// This function will be triggered by the defined timeInterval.
interval = setInterval( function () {
// Get next char from string to be typed and concatenate to the display string.
displayStr = displayStr + typeStr[typeIdx++];
// Make a sandwich with the display string in between the original html pieces.
$w(“#typewriterPage”).html = strPieces[0] + displayStr + strPieces[1];
// Stop the interval from running when we get to the last character to by “typed”.
if (typeIdx === typeStr.length) clearInterval(interval);
}, timeInterval);
});

8

We appreciate your interest in really getting the most out of Corvid and how much you want to learn. Please understand that if you are going to work with code extensively in the product and not just the features in the user interface, you will need to familiarize yourself with basic coding concepts to accomplish what you want. We are happy to get you pointed in the right direction and get you started with what the code should look like, but you’ll need to take it from there.

You may also want to check out the WixArena - it’s a hub where you can look for Corvid (and other) experts for hire.

Thanks for your understanding.

9

All I was asking the positioning of your code with the rest. That is all.
Because it was not entirely clear to me what you explained.

If you do not want to help further, that is fine. Thank you for your time

10

We are glad to help, but “that is all” is not quite so simple. The Typewrite example is a full example of how to implement a simulated typewriter effect. Knowledge of coding is required to understand the code and to be able to make changes.

The code I gave you was only partial and was only an example of what could be done. How and where the code is added is dependent on other considerations, such as: when does the text change? how many strings? are the strings in a database collection? will you be adding or deleting strings? and so on…

As you yourself pointed out, you are not a coder, and this is why I suggested looking for help in the WixArena. Wix provides examples so users who know how to code, can see how to do different things in code. We are unable to provide solutions to all requests.

11

Ok
Thank you

12

Hey Folks -

Wix recently approved the npm for TypeIt. Hopefully this makes it easier to get your desired design :slight_smile: