Text WYSIWYG Feature Tutorial

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 and forms

S
Written by Support
Updated over a week ago

What is the Text / WYSIWYG?

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.

What are some use cases of Text Plugin?

Some use cases of this feature include:

  • Training resources

  • Announcements

  • Menus for restaurants

  • Bulletins or programs for events

  • Information about your business or organization like mission and vision statements

  • Embedded forms to gather contact information

What are the Text WYSIWYG Plugin’s primary functions and what are the steps to accomplish them?

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.

How to Add the Text WYSIWYG Plugin to Your App

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.

IMPORTANT: How to Copy/Paste from Your Original Source

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

Editing Text Styles

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

How to add/embed an image and make it responsive

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

How to add/embed an video and make it responsive

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

How to add/embed a form and make it responsive

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

How to add web links (also known as hyperlinks)

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”

What are some Pro Tips you should know about to take your app to the next level?

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:

What are some related articles?

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 :)

Did this answer your question?