Advanced Customization in atWavi

Advanced Customization in atWavi

Creating atWavi custom content using HTML

Tinashe Seremwe's photo
Tinashe Seremwe
·

5 min read

The Wavi app launched by Atsign is a public space for your business, your projects, or yourself. Provide as little or as much information as you want on your weblet (basically a microsite), which will be made available to the public on our directory. You can opt to publish contact information, location, media, social media links, even gamer tags. For more advanced customization, HTML and CSS can be used to format custom content.

In order to do this, start by selecting the Text field type, under Custom Content. For the examples shown in this article, you can copy the code and replace the text in the asterisks with your own content.

HTML Tags

HTML Tags are like keywords that determine how a webpage should be displayed on screen. Most html tags come in two parts.

  • An opening tag is used to mark the beginning of a section of page content. eg <html>

  • A closing tag is used to make the end of a section of page content. eg </html>

Most tag types require the use of both opening and closing tags. However some do not, such as <br>. We will go over some of the tags that you might find useful when customizing your wavi weblet.

Positioning

To center your content like how this article is centered, the <center> tags can be used. Anything that is in between the tags will appear centered on the screen.

Code
<center> *your content here*</center>

Paragraphs and line breaks

There are two ways to create paragraphs and line breaks. The first way is by using <p> tags. When you enter a <p> tag, it will be handled as the beginning of a new paragraph.

Code
<p> *your content here* </p>

The second way is by using the <br> tag, which creates a line break in your content. You do not need to close this tag. A new line will be started on the content that follows the <br>.

Colored Text

If you want to add a pop of color to the text on your weblet, you can use CSS eg style="color:#00b7b8;" and <span> tags if you are only coloring specific parts of your paragraph.

Code
<p> <span style="color:#00b7b8;"> This text is teal colored </span></p>

Scrolling Text

To display a scrolling area of text, <marquee> tags can be used. These produce text that will scroll from one end of the text area to the other, indefinitely.

Code
<marquee> *your text here* </marquee>

This will display a single line of scrolling text.

To insert a link that has alternative text displayed on the screen, you can use <a> tags. The text in between the <a> and </a> tag is what will be displayed on screen.

Code
<a target="_blank" href="*your link here*">*your text here*</a>

Explanation

target="_blank" will open the link in a new tab.

href= specifies the URL of the page the link points to.

Images

Online images can be added to your wavi weblet using the <img> tag. The image must be accessible via URL. The source could be a website, a google image search or an image that you have uploaded onto an image hosting site like imgbb.com.

Code
<img width="100%" src="*your image url here*">

Explanation
width="100%" specifies the width of the image in relation to the screen. This can also be set in pixels eg "400px".

src="" specifies the URL for the image that will be displayed.

iFrames

An iFrame is a framed section in a web page that displays content from another web page. In the wavi app, you can use iFrames to display any non text content. This includes gifs, videos, images, audio players and even games.

The <iframe> tags are usually generated by websites when you select the option to share the website’s content via embedding. The general structure of the <iframe> tags is as follows.

Code 

</iframe>```

**Explanation** <br>
src="" specifies the URL for the content that will be embedded into the iFrame.
width="" specifies the width of the iFrame
height="" specifies the height of the iFrame


Other attributes are usually added to the iFrame such as width and height specifiers. 

## Videos
<iframe width="100%" height="400" src="https://www.youtube.com/embed/NHDDQbsRHU8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" enablejsapi="true" id="widget2"></iframe> 

In order to get the embed code for a video on Youtube, Vimeo or any other streaming service, you will need to be on a desktop. While on the chosen video, click share and then select embed in order to access the embed code. You can then transfer this code to your mobile device via email or other means.

Alternatively, you can use the sample iframe code provided below. Navigate to your chosen video and copy the video URL. If the URL is https://youtube.com/NHDDQbsRHU8 you only need the last part of the URL after the last / so in this case it would be just 'NHDDQbsRHU8'. Copy this and paste it into the iframe code after embed/ as shown in the example.

**Code** <br>
```<iframe width="100%" height="400" src="https://www.youtube.com/embed/*your video code here*" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" enablejsapi="true" id="widget2"></iframe> ```

## Music Players
<iframe src="https://open.spotify.com/embed/playlist/1vDhN0uiRxJiBR8JmZpnLl" width="100%" height="380" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>

Playable music can be added from Spotify, Soundcloud and other streaming services. In order to get the embed code for a specific song or playlist, select share and then choose embed to access the embed code. Refer to the code below to gain an understanding of what the embed code may look like.

**Code** <br>
```<iframe src="*your playlist link here*" width="100%" height="380" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>```

Once embedded, a music player will be displayed on the weblet. 

Depending on the streaming service, people may be required to login to their streaming accounts in order to play the music on your weblet.

## Gifs
<iframe src="https://giphy.com/embed/MeCyHmilLHIjWPcpWV" width="100%" height="480" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/tea-trex-loof-and-timmy-MeCyHmilLHIjWPcpWV">via GIPHY</a></p>

In order to add a gif to your weblet, you will need to find a gif online on a gif website like https://giphy.com/ . Once you have selected a gif, click on share or embed in order to access the embed code. You can then transfer this code to your mobile device via email or other means. The code will look something like this. 

**Code** <br>
```<iframe src="https://giphy.com/embed/MeCyHmilLHIjWPcpWV" width="100%" height="480" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/tea-trex-loof-and-timmy-MeCyHmilLHIjWPcpWV">via GIPHY</a></p>```. 

To remove the hyperlink that says via GIPHY beneath the gif, delete the ```<p>``` tags and everything in between them. 

Anything with an embed code can be added to your weblet using iFrames. 

Some examples include:
- Calendars
- Countdown timers
- Google docs, sheets and slides
- Code compilers and snippets
- Maps

The list is almost endless.

For inspiration, have a look at the sample weblets shown on [https://wavi.ng/@wavi](https://wavi.ng/@wavi).
@platform