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. It can be found within most of our plugins and is a great way to add variety and enhanced functionality to your app!

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.

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: Paste the image URL into the “source” field

Step 4: Adjust the dimensions to “100%” and “auto” to make it responsiveness (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.

Step 2: Click the “video” icon

Step 3: Paste the video's embed code into the embed code tab

Step 4: Adjust the dimensions to 100% and auto for responsiveness (see Pro Tip below)

Step 5: 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.

Step 2: Click the Source Code icon

Step 3: Paste the embed code into the source code window

Step 4: 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 5: 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

Step 3: Select "New Window" from the target dropdown menu

Step 4: 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:

Pro Tip 3: Using Dropbox for hosting content
Dropbox provides a great hosting option for a lot of the content of apps. If you do use Dropbox, you will need to change the URL slightly to get it to function in the app. 

For example take this link: https://www.dropbox.com/s/5z8RSsTWgcdvn0/yourFile.mp4?dl=0

To work with our system it needs to be changed to: https://dl.dropbox.com/s/5z8RSsTWgcdvn0/yourFile.mp4

Essentially removing the "www" and replacing it with "dl" and removing "?dl=0" at the end of the link.

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?