UNPKG

optimizely-oui

Version:

Optimizely's Component Library.

14 lines (7 loc) • 1.03 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
# Code Snippets Use code snippets when you need to show a piece of code that users will copy and paste into their site or app. Snippets are not editable. If the snippet needs an ID or a certain variable to be inserted, you should insert the ID into the snippet. ![alt text](http://design.optimizely.com/assets/img/design-patterns/product/code-editing/code-snippet.png "example of code snippet") ## Copying Code snippets should be easily copyable. Display them in a read-only input box that selects the text when the user clicks into it, and provide a copy button next to the input. This makes it easy to copy with a keyboard shortcut or by clicking a button. This also avoids errors while copying, such as not selecting the entire snippet. ## Snippet Usage There should be a clear message about what to do with the snippet after it's copied. For example, "Paste this into the <head> tag of your website." The message should also include what the snippet will do, such as "This will allow code to run on all of your websites."