You are using an unsupported browser. Please update your browser to the latest version on or before July 31, 2020.
close
Home > Sharing > How can I customize a Glitch app embed?
How can I customize a Glitch app embed?

What You Can Customize

 

You can customize the embed by dragging ↕ or ↔ to resize the panes, you can toggle the filetree, change which code file is shown, as well as hide attribution, and choose to show the app or the code. Here's a full break-down of the ways you can customize an embed and how to do so...

 

Show App

If you'd like to display the app preview, select 'Show App' or append the following parameter to the embed URL: previewSize=100

 

App view:

 

 

Show Code

If you'd like to display the code, select 'Code' or append the following parameter to the embed URL: previewSize=0

 

Code view:

 

 

Adjust the App Preview Width

If you'd like to change the width of the app preview to show more or less of it, drag ↔ or append the following paramter to the embed URL: previewSize=X (where 'X' is an integer >0 and <100)

 

Hide the Filetree

By default when you elect to show the code, the filetree is shown. To hide the filetree click on the left arrow at the top of the filetree, or append the following parameter to the embed URL: sidebarCollapsed=true

 

 

Hide Attribution

By default the avatar of the creator or creators of a project are shown in the footer of the embed. To hide attribution, check the 'Hide Attribution' box or append the following parameter to the embed URL: attributionHidden=true

 

 

Change the Code File Shown

To set a specific code file to be shown in the embed you can select the file in the filetree, or specify the path to the file by adding the following parameter to the embed URL: path=X (where 'X' is path and name of the file e.g. views/index.html)

 

Adjust the Embed Height

You can change the height of the embed by dragging ↕, or changing the height value in the containing DIV tag of the embed code: height: Xpx (where 'X' is the number of pixels high you want the embed to display)

 

Highlight Specific Lines of Code

You can highlight specific lines of code within the displayed code file by specifying a comma-separated list of lines to highlight in the highlights parameter: highlights=9,12

 

 

Got more questions?  Check out our Community Forum

Open 24/7, the forum is where Glitch makers help each other and show off all the rad apps that they have created.  It's the friendliest community of coders on the Web!


 
Feedback
4 out of 4 found this helpful

scroll to top icon