The Text / WYSIWYG (What You See Is What You Get) is a powerful tool that allows you to add text, images, video, and embed web links within a variety of plugins in your app. This is a great way to add variety and enhanced functionality to your app! It can be found within most of our plugins and is also a standalone feature, allowing you to add it anywhere you please.

Some use cases of this feature include:

The Text Plugin provides some amazing functionality as described in the introduction, but read on to see what some of the core features are and how to set them up.

Here are some simple steps get this feature live on your app, but if you’d like more detailed information, we’ve written a dedicated article about how to create and enable Marketplace features.

Step 1: In the left menu, go to “Features”
​Step 2: Search the Marketplace
​Step 3: Click “Add”, give it a title, and click “Add” again to confirm it
​Step 4: Once you’ve created your content, you can make your feature accessible by adding it to a Folder plugin, the side menu, or the footer menu.

Once you've added it, you can change the feature's icon and title, which will be what your users see when they access it in your app.

When you copy and paste text from an original source, whether online or on a computer program, it will often times copy over hidden code that can overwrite your app’s design settings and make it look different than what you intend. Here’s how you can make sure that doesn’t happen.

Step 1: Copy the text from your source

Step 2: Paste it into the WYSIWYG

Step 3: Select All the text in the WYSIWYG

Step 4: Clear the formatting by selecting Format > Clear Formatting

Step 5: Reformat anything that was removed using the toolbar

You can add many different styles to your text with the Text / WYSIWYG. Here’s how you do it:

Step 1: Type in the text that you want

Step 2: Add the styling that you want for the text using the styling options in the toolbar

Step 3: Enjoy all of the different things you can do with our Text Styles

You can embed images and make them responsive so that it will take up the full width of the device your users are using (i.e. phone vs tablet). Here’s how:

Step 1: Click the “Image” icon

Step 2: Copy the image's URL from it's source

Step 3: Complete "Insert/edit image" Fields

Paste the URL in the "Source" field and give your image a description. In the "Dimensions" field, adjust the values to "100%" and "auto" to make it responsive (see Pro Tip below)

Step 4: Click “OK”

Step 5: Reap the rewards of your awesomely responsive embedded image

You can embed images and make them responsive so that it will take up the full width of the device your users are using (i.e. phone vs tablet). Here’s how:

Step 1: Copy the video's embed code
Though you can just use the video's URL, copying the embed code will ensure that it uses the correct specifications set by your video hosting provider.

First, head over to the video you'd like to embed and locate the share button at the bottom of the video:

Click "Share," and then "Embed":

Copy the source code on the right:

Step 2: Click the “video” icon

Step 3: Paste the video's embed code into the embed code tab and adjust the dimensions to 100% and auto for responsiveness (see Pro Tip below)

Step 4: Reap the rewards of your awesomely responsive embedded video

Step 1: Copy the form's embed code
Most form providers will give an embed code so that you can add it to your app(s), websites, and other digital pages.

Open your form and click Send at the top right corner:

Click the Source Code icon "< >" and copy the code underneath

Step 2: Click the Source Code icon

Step 3: Paste the embed code into the source code window and edit the width and height to make it width="100%" height="8000"

This will make sure your form takes up the entire width of the page and also gives enough vertical space so that your form can extend as far down as you need it to.
​Note: If your form is long, you may need to make the height larger.

Step 4: Reap the rewards of your awesomely responsive embedded form

You can add all sorts of links to the text in the Text / WYSIWYG. Here’s how:

Step 1: Highlight the text you want to make clickable and click the "Insert/Edit Link" icon

Step 2: Copy and paste URL that you want to embed into the “URL” field and set "Target" to New Window

Step 3: Click “OK”

Having worked with apps for years, we’ve learned a thing or two. So, to both help your app stand out and accomplish your primary goals, here are some tips you should consider.

Pro Tip 1: Make sure your images and videos are responsive
To make sure your images and videos are responsive across all devices when adding them to the WYSIWYG, make the with dimensions to 100% and height dimensions to auto.

Pro Tip 2: You Can Take Your App to the Next Level With The Source Code Editor
If you know HTML and CSS, you can take your app to the next level by adding code by clicking the Source Code icon:

In addition to this article, we recommend checking out the following related articles so that you have a better insight into how to use the system to its fullest advantage:

Still have questions? No problem! Reach out to us and we’d be happy to help :)