Skip to main content

Adding Links

  • Updated

You only need to edit a single file to add your links to Glitch in Bio: settings.json. With your remix of Glitch in Bio open in the editor, you’ll see the project files on the left. Click settings.json to open it.

 

 

 

If you haven’t written code before don’t worry! JSON is a very low-barrier format you’ll have no trouble editing. If you make a syntax error the Glitch editor will alert you–if you get really stuck just open Tools > Rewind and go back to the last point where your project was working.

In the settings.json you’ll see an array named links, which looks like this:

"links": [ 
 {  
  "url": "https://glitch.new/links",
  "text": "Remix! Have your own Glitch-in-bio running in seconds.",
  "img":"https://cdn.glitch.me/efc5414a-882b-4708-af81-8461abbc1a82%2Fglitchmidblues.png?v=1634289872484" 
 }, 
 {
  "url": "https://glitch.com/edit/#!/glitch-in-bio?path=README.md",
  "text": "View source! Check out the code to see how it's built.",
  "img": ""
 }, 
 {  
  "url": "https://www.glitch.com/",
  "text": "Built by and on Glitch, the easiest way to build the web.", 
  "img":"https://cdn.glitch.me/efc5414a-882b-4708-af81-8461abbc1a82%2Fglitchdarkpinks.png?v=1634289859236" 
}
],

 

Everything between the square braces [ … ] is the content of the array, which is the list of links in your site. Each link is a JSON object, enclosed in curly braces { ... } and separated by commas. A link is represented by three properties also separated by commas, each one with a name (e.g. url) and a value (e.g. https://glitch.com), both in quotes:

 

  • A URL the visitor will navigate to when they click the link
  • Some text to display that the visitor will click on
  • An optional image URL that will display when you have certain themes selected

 

Try changing the content of the first text value to see it update in the preview on the right!

 

 

To add your links, go to the websites you want to include in your Glitch in Bio site and for each one:

  • Copy the link (you can just copy and paste from your browser address bar, or use a Share control if the website has one)
  • Paste the link into your array for the url property, making sure you enclose it in the quotes, like this: “url”:”https//glitch.com”,
  • Update the text value to whatever you want to display in the site for the current link
  • If you have an image you want to add, open assets > upload it > copy its url > include it in the JSON img property

 

If you want to display images, you’ll need to select a theme that shows them in the page–to try the themes included with Glitch in Bio by default, in your settings.json change the theme value from glitch to either menu or gallery.

 

Edit more JSON!

While you’re in the settings.json file check out the other properties. Add your social media profiles and they’ll display in the site footer. You can also set the text and image that display at the top of the page.

 

Remember: Don’t worry if you break the site–it’s yours to do what you want with! Just open Tools > Rewind to get back on track if you get stuck.

Related articles

Powered by Zendesk