Skip to content
Navigation Menu
{{ message }}
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathembeds.html
More file actions
188 lines (178 loc) · 31.8 KB
/
Copy pathembeds.html
File metadata and controls
188 lines (178 loc) · 31.8 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="../favicon.png" />
<link rel="stylesheet" href="../fontawesome.css" />
<meta name="viewport" content="width=device-width" />
<meta http-equiv="content-security-policy" content="">
<link href="../app/immutable/assets/_layout.3a6a7fd4.css" rel="stylesheet">
<link href="../app/immutable/assets/_page.9068b0fb.css" rel="stylesheet">
<link href="../app/immutable/assets/DocList.312ef88c.css" rel="stylesheet">
<link href="../app/immutable/assets/MarkdownContent.09881ec7.css" rel="stylesheet">
<link href="../app/immutable/assets/IndexWrapper.b786c468.css" rel="stylesheet">
<link href="../app/immutable/assets/embeds.1b9cc348.css" rel="stylesheet">
</head>
<body>
<main class="layout wrapper svelte-77ehm7"><nav class="nav container svelte-1e9pbzu"><div class="nav display svelte-1e9pbzu"><a class="nav branding svelte-1e9pbzu" href="/"><svg class="logo container nav svg svelte-1h116gd" xmlns="http://www.w3.org/2000/svg" width="271.115mm" height="271.115mm" viewBox="0 0 1024 1024"><defs><mask id="gnet-mask"><circle id="gnet-mask-base" cx="512" cy="512" r="440" fill="white"></circle><circle id="gnet-dot-mask" cx="192" cy="512" r="192" fill="black"></circle><path id="gnet-guilded" fill="black" d="M 644.27,704.52
C 600.00,688.00 424.00,622.39 424.00,320.00
424.00,320.00 864.00,320.00 864.00,320.00
864.00,320.00 864.00,376.00 857.26,407.01
857.26,407.01 522.00,408.00 522.00,408.00
522.01,424.05 536.00,560.00 644.00,609.84
664.00,608.00 712.00,568.00 724.00,543.00
724.00,543.00 637.00,542.40 637.00,542.40
608.00,520.00 596.08,483.25 591.00,455.00
591.00,455.00 852.00,455.00 852.00,455.00
824.00,584.00 744.00,672.00 645.00,704.79
644.76,704.71 644.52,704.62 644.27,704.52 Z"></path></mask></defs><g id="gnet-main"><circle id="gnet-base" cx="512" cy="512" r="440" mask="url(#gnet-mask)"></circle><circle id="gnet-dot" cx="192" cy="512" r="132"></circle></g></svg></a>
<ul class="nav button-list svelte-1e9pbzu"><li class="nav button-item svelte-1e9pbzu"><a class="nav button svelte-1e9pbzu" title="Docs" href="/docs">Docs</a></li>
<li class="nav button-item svelte-1e9pbzu"><a class="nav button svelte-1e9pbzu" title="API References" href="/references">API</a></li>
</ul></div>
</nav>
<div class="layout container svelte-77ehm7">
<div class="layout document svelte-77ehm7"><aside class="entry-list container svelte-1eetiev"><div class="entry-list search-field"><div class="entry-list search-wrapper svelte-1eetiev"><i class="entry-list search-icon fas fa-search svelte-1eetiev"></i>
<input id="entry-list-search" class="entry-list search svelte-1eetiev" placeholder="Search docs" value=""></div></div>
<div class="entry-list items-wrapper svelte-1eetiev"><ul class="entry-list items svelte-1eetiev"><li class="entry-category container svelte-flts2q"><header class="entry-category header svelte-flts2q"><h5 class="entry-category header-text svelte-flts2q">Getting Started</h5></header>
<ul class="entry-category body svelte-flts2q"><li class="entry-item container svelte-1bnzhps"><a class="entry-item link svelte-1bnzhps" href="/docs/develop-bot"><i class="container fa-solid fa-play entry-item icon"></i>
<span class="entry-item name">Developing bots</span></a>
</li><li class="entry-item container svelte-1bnzhps"><a class="entry-item link svelte-1bnzhps" href="/docs/powering-bot"><i class="container fa-solid fa-bolt entry-item icon"></i>
<span class="entry-item name">Powering up bot</span></a>
</li><li class="entry-item container svelte-1bnzhps"><a class="entry-item link svelte-1bnzhps" href="/docs/commands"><i class="container fa-solid fa-bolt entry-item icon"></i>
<span class="entry-item name">Commands</span></a>
</li></ul>
</li><li class="entry-category container svelte-flts2q"><header class="entry-category header svelte-flts2q"><h5 class="entry-category header-text svelte-flts2q">How to Use</h5></header>
<ul class="entry-category body svelte-flts2q"><li class="entry-item container active svelte-1bnzhps"><a class="entry-item link svelte-1bnzhps" href="/docs/embeds"><i class="container fa-solid fa-play-circle entry-item icon"></i>
<span class="entry-item name">Embeds</span></a>
</li></ul>
</li><li class="entry-category container svelte-flts2q"><header class="entry-category header svelte-flts2q"><h5 class="entry-category header-text svelte-flts2q">Quick Overview</h5></header>
<ul class="entry-category body svelte-flts2q"><li class="entry-item container svelte-1bnzhps"><a class="entry-item link svelte-1bnzhps" href="/docs/supported"><i class="container fa-solid fa-check-double entry-item icon"></i>
<span class="entry-item name">Supported Features</span></a>
</li></ul>
</li><li class="entry-category container svelte-flts2q"><header class="entry-category header svelte-flts2q"><h5 class="entry-category header-text svelte-flts2q">Resources</h5></header>
<ul class="entry-category body svelte-flts2q"><li class="entry-item container svelte-1bnzhps"><a class="entry-item link svelte-1bnzhps" href="/docs/message"><i class="container fa-solid fa-pencil entry-item icon"></i>
<span class="entry-item name">Message builder</span></a>
</li></ul>
</li></ul></div>
</aside>
<div class="content-wrapper container svelte-1y4vd51"><article class="content-wrapper content svelte-1y4vd51"><div class="markdown-content container svelte-lhtcnm"><h1>How to use Embeds</h1>
<p>Embeds are generally used to display the preview of certain content or a link, but they can be used as content itself.</p>
<h2>Content and Custom embeds</h2>
<p>There are 2 kinds of embeds, content embeds and custom embeds(may also be called rich embeds).</p>
<p>Content embeds are used to automatically generate a preview of a link. If you add a hyperlink, the Guilded client will pull OpenGraph metadata from the linked website and display the contents according to the fetch data. Content embeds may differ in design, unlike custom embeds(website embeds vs share feature vs server invite).</p>
<p>Custom embeds are similar to content website embeds in terms of how they look, but they are fully customizable, meaning, you can set custom colour of the side border, add fields you want, etc. Custom embeds do not require a hyperlink to be added and it can be added freely to a message. They are generally used for webhooks to display events/new content or for bots to have a fancy output that is more understandable from a glance. Content embeds cannot look like shared messages or team invites as of now.</p>
<h2>Creating a custom embed</h2>
<h3>Basics</h3>
<p>To create an embed, you need to create a new instance of <a href="/">Embed</a>. From that point, you can use embed constructor parameters, object initializers or methods to generate content for the embed. As an example:</p>
<div class="code-block container"><header class="code-block header"><div class="code-block lang">C#</div><section class="code-block meta"></section></header><pre class="code-block code-wrapper language-csharp csharp"><code class="code-block code-container language-csharp csharp"><codeline class="code-block line inserted"><span class="token keyword">using</span> <span class="token namespace">Guilded<span class="token punctuation">.</span>Base<span class="token punctuation">.</span>Embeds</span><span class="token punctuation">;</span></codeline></code></pre></div>
<div class="code-block container"><header class="code-block header"><div class="code-block lang">C#</div></header><pre class="code-block code-wrapper language-csharp csharp"><code class="code-block code-container language-csharp csharp"><codeline class="code-block line"><span class="token class-name">Embed</span> embed <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token constructor-invocation class-name">Embed</span></codeline><codeline class="code-block line"><span class="token punctuation">{</span></codeline><codeline class="code-block line"> Title <span class="token operator">=</span> <span class="token string">"This is the title of the embed"</span><span class="token punctuation">,</span></codeline><codeline class="code-block line"> Description <span class="token operator">=</span> <span class="token string">"Description"</span><span class="token punctuation">,</span></codeline><codeline class="code-block line"> Footer <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token constructor-invocation class-name">EmbedFooter</span><span class="token punctuation">(</span><span class="token string">"The footer text of the embed"</span><span class="token punctuation">)</span></codeline><codeline class="code-block line"><span class="token punctuation">}</span><span class="token punctuation">;</span></codeline></code></pre></div>
<p>And now we can send the embed we made:</p>
<div class="code-block container"><header class="code-block header"><div class="code-block lang">C#</div></header><pre class="code-block code-wrapper language-csharp csharp"><code class="code-block code-container language-csharp csharp"><codeline class="code-block line"><span class="token keyword">await</span> msgCreated<span class="token punctuation">.</span><span class="token function">ReplyAsync</span><span class="token punctuation">(</span>embed<span class="token punctuation">)</span><span class="token punctuation">;</span></codeline></code></pre></div>
<p>This produces:</p>
<div class="example-block container svelte-ok4ugp"><div class="message-block container svelte-z3n7z0"><aside class="message-block avatar-wrapper svelte-z3n7z0"><img class="message-block avatar svelte-z3n7z0" src="https://raw.githubusercontent.com/Guilded-NET/Guilded.NET/early-access/assets/Icon.png" alt="Example message user avatar"></aside>
<div class="message-block content"><header class="message-block header svelte-z3n7z0"><span class="message-block header-item name svelte-z3n7z0">Example Bot</span>
<span class="message-block header-item timestamp svelte-z3n7z0">Yesterday 6:27 PM</span>
<span class="message-block header-item user-badge svelte-z3n7z0">BOT</span></header>
<div class="message-block text"><div class="message-embed container svelte-ddm2fs" style="border-left-color: #f5c400;">
<article class="message-embed content-wrapper svelte-ddm2fs"><div class="message-embed body"><h4 class="message-embed title message-embed content-header svelte-ddm2fs"><a class="message-embed linked-text svelte-ddm2fs">This is the title of the embed</a></h4>
<section class="message-embed description">
Description
</section>
</div>
</article>
<footer class="message-embed footer svelte-ddm2fs">
<span class="message-embed footer-content"><span class="message-embed footer-text svelte-ddm2fs">The footer text of the embed</span>
</span></footer>
</div></div></div>
</div>
</div>
<p>Due to design choices, embeds don’t need to be built. This may be subject to change.</p>
<p>You can check for full and quick overview of all embed features in <a href="/">Embed reference page</a>. This document will only help understand some of the features from this point.</p>
<h3>Fields</h3>
<p>Fields are pretty simple. They also have a title(name) and a description(value) just like embeds, but there can be multiple of them and they can be optionally inline. To make a field inline, add <code>true</code> as a third argument.</p>
<div class="code-block container"><header class="code-block header"><div class="code-block lang">C#</div></header><pre class="code-block code-wrapper language-csharp csharp"><code class="code-block code-container language-csharp csharp"><codeline class="code-block line"><span class="token class-name">Embed</span> embed <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token constructor-invocation class-name">Embed</span> <span class="token punctuation">{</span> Title <span class="token operator">=</span> <span class="token string">"Title"</span><span class="token punctuation">,</span> Description <span class="token operator">=</span> <span class="token string">"Description. This is not a field."</span> <span class="token punctuation">}</span></codeline><codeline class="code-block line"> <span class="token punctuation">.</span><span class="token function">AddField</span><span class="token punctuation">(</span><span class="token string">"Field #1"</span><span class="token punctuation">,</span> <span class="token string">"The value of the field"</span><span class="token punctuation">)</span></codeline><codeline class="code-block line"> <span class="token punctuation">.</span><span class="token function">AddField</span><span class="token punctuation">(</span><span class="token string">"Field #2"</span><span class="token punctuation">,</span> <span class="token string">"This field is inline"</span><span class="token punctuation">,</span> <span class="token named-parameter punctuation">inline</span><span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">)</span></codeline><codeline class="code-block line"> <span class="token punctuation">.</span><span class="token function">AddField</span><span class="token punctuation">(</span><span class="token string">"Field #3"</span><span class="token punctuation">,</span> <span class="token string">"This field is inline too!"</span><span class="token punctuation">,</span> <span class="token named-parameter punctuation">inline</span><span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span></codeline></code></pre></div>
<p>It is not mandatory to have either the name or the value of the field. Empty string can be passed to either of them and it will not be visible in the embed. Although passing a null will result in an error by Guilded.NET (because Guilded API does it as well).</p>
<h3>Authors and Footers</h3>
<p>Embeds have more than descriptions, titles and fields. They can also have an author, which appears at the top, and a footer, which appears at the bottom.</p>
<div class="code-block container"><header class="code-block header"><div class="code-block lang">C#</div><section class="code-block meta"></section></header><pre class="code-block code-wrapper language-csharp csharp"><code class="code-block code-container language-csharp csharp"><codeline class="code-block line inserted"><span class="token keyword">using</span> <span class="token namespace">System</span><span class="token punctuation">;</span></codeline><codeline class="code-block line"></codeline><codeline class="code-block line"><span class="token keyword">using</span> <span class="token namespace">Guilded<span class="token punctuation">.</span>Base<span class="token punctuation">.</span>Embeds</span><span class="token punctuation">;</span></codeline></code></pre></div>
<div class="code-block container"><header class="code-block header"><div class="code-block lang">C#</div></header><pre class="code-block code-wrapper language-csharp csharp"><code class="code-block code-container language-csharp csharp"><codeline class="code-block line"><span class="token class-name">Embed</span> embed <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token constructor-invocation class-name">Embed</span> <span class="token punctuation">{</span> Description <span class="token operator">=</span> <span class="token string">"The description of the embed."</span> <span class="token punctuation">}</span></codeline><codeline class="code-block line"> <span class="token punctuation">.</span><span class="token function">SetAuthor</span><span class="token punctuation">(</span><span class="token string">"The name of the author"</span><span class="token punctuation">,</span> iconUrl<span class="token punctuation">,</span> <span class="token keyword">new</span> <span class="token constructor-invocation class-name">Uri</span><span class="token punctuation">(</span><span class="token string">"https://guilded.gg/"</span><span class="token punctuation">)</span><span class="token punctuation">)</span></codeline><codeline class="code-block line"> <span class="token punctuation">.</span><span class="token function">SetFooter</span><span class="token punctuation">(</span><span class="token string">"The footer text"</span><span class="token punctuation">,</span> iconUrl<span class="token punctuation">)</span><span class="token punctuation">;</span></codeline></code></pre></div>
<div class="example-block container svelte-ok4ugp"><div class="message-block container svelte-z3n7z0"><aside class="message-block avatar-wrapper svelte-z3n7z0"><img class="message-block avatar svelte-z3n7z0" src="https://raw.githubusercontent.com/Guilded-NET/Guilded.NET/early-access/assets/Icon.png" alt="Example message user avatar"></aside>
<div class="message-block content"><header class="message-block header svelte-z3n7z0"><span class="message-block header-item name svelte-z3n7z0">Example Bot</span>
<span class="message-block header-item timestamp svelte-z3n7z0">Yesterday 6:27 PM</span>
<span class="message-block header-item user-badge svelte-z3n7z0">BOT</span></header>
<div class="message-block text"><div class="message-embed container svelte-ddm2fs" style="border-left-color: #f5c400;">
<header class="message-embed author svelte-ddm2fs"><div class="message-embed icon author-icon svelte-ddm2fs"><img class="message-embed icon-image svelte-ddm2fs" src="https://raw.githubusercontent.com/Guilded-NET/Guilded.NET/early-access/assets/Icon.png" alt="Embed Author Icon"></div>
<a class="message-embed author-text linked-text svelte-ddm2fs" href="https://guilded.gg/">The name of the author</a></header>
<article class="message-embed content-wrapper svelte-ddm2fs"><div class="message-embed body">
<section class="message-embed description">
Description
</section>
</div>
</article>
<footer class="message-embed footer svelte-ddm2fs"><div class="message-embed icon footer-icon svelte-ddm2fs"><img class="message-embed icon-image svelte-ddm2fs" src="https://raw.githubusercontent.com/Guilded-NET/Guilded.NET/early-access/assets/Icon.png" alt="Embed Footer Icon"></div>
<span class="message-embed footer-content"><span class="message-embed footer-text svelte-ddm2fs">The footer text</span>
</span></footer>
</div></div></div>
</div>
</div>
<p>As the name suggests, authors are supposed to represent who made the content. But it isn’t restricted to that. The URL of the author can be used to link either the content or the author’s profile.</p>
<p>Footers provide mostly side information, such as like, comment count, where it was posted, or it could be a replacement for embed author.</p>
<p>Both footer and an author can have an optional icon, although footer cannot hold a URL. But footers can hold timestamps… Well, sort of. Timestamp’s data isn’t defined inside a footer, but it is displayed in the footer.</p>
<div class="code-block container"><header class="code-block header"><div class="code-block lang">C#</div></header><pre class="code-block code-wrapper language-csharp csharp"><code class="code-block code-container language-csharp csharp"><codeline class="code-block line"><span class="token class-name">Embed</span> embed <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token constructor-invocation class-name">Embed</span> <span class="token punctuation">{</span> Description <span class="token operator">=</span> <span class="token string">"This embed has a timestamp at the bottom"</span> <span class="token punctuation">}</span></codeline><codeline class="code-block line"> <span class="token punctuation">.</span><span class="token function">SetTimestamp</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></codeline></code></pre></div>
<p>If no argument is passed to <a href="/"><code>SetTimestamp</code></a>, UTC current time will be used instead.</p>
<h3>Setting side colour</h3>
<p>Custom embeds use <a href="https://docs.microsoft.com/en-us/dotnet/api/system.drawing.color" rel="nofollow">Color struct</a> to set the colour of the embed. Alpha channel of the embed colour is filtered out, so the transparency of the colour is ignored(if you use <a href="https://docs.microsoft.com/en-us/dotnet/api/system.drawing.color.transparent" rel="nofollow">Color.Transparent</a>, it will be rendered as white instead). Colour is displayed at the left side of the embed and doesn’t change any other parts of it.</p>
<p>An example using <a href="https://docs.microsoft.com/en-us/dotnet/api/system.drawing.color.red" rel="nofollow">Color.Red</a> as embed colour:</p>
<div class="code-block container"><header class="code-block header"><div class="code-block lang">C#</div><section class="code-block meta"></section></header><pre class="code-block code-wrapper language-csharp csharp"><code class="code-block code-container language-csharp csharp"><codeline class="code-block line inserted"><span class="token keyword">using</span> <span class="token namespace">System</span><span class="token punctuation">;</span></codeline><codeline class="code-block line"><span class="token keyword">using</span> <span class="token namespace">System<span class="token punctuation">.</span>Drawing</span><span class="token punctuation">;</span></codeline><codeline class="code-block line"></codeline><codeline class="code-block line"><span class="token keyword">using</span> <span class="token namespace">Guilded<span class="token punctuation">.</span>Base<span class="token punctuation">.</span>Embeds</span><span class="token punctuation">;</span></codeline></code></pre></div>
<div class="code-block container"><header class="code-block header"><div class="code-block lang">C#</div><section class="code-block meta"></section></header><pre class="code-block code-wrapper language-csharp csharp"><code class="code-block code-container language-csharp csharp"><codeline class="code-block line"><span class="token class-name">Embed</span> embed <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token constructor-invocation class-name">Embed</span></codeline><codeline class="code-block line"><span class="token punctuation">{</span></codeline><codeline class="code-block line"> Title <span class="token operator">=</span> <span class="token string">"Title"</span><span class="token punctuation">,</span></codeline><codeline class="code-block line"> Description <span class="token operator">=</span> <span class="token string">"Description"</span><span class="token punctuation">,</span></codeline><codeline class="code-block line inserted"> Color <span class="token operator">=</span> Color<span class="token punctuation">.</span>Red</codeline><codeline class="code-block line"><span class="token punctuation">}</span><span class="token punctuation">;</span></codeline></code></pre></div>
<p>Colours are not restricted to pre-defined ones. You can create custom colours using <a href="/"><code>Embed.SetColor(int rgba)</code></a>, <a href="/"><code>Embed.SetColor(int red, int green, int blue)</code></a> or through other means.</p>
<h2>Full Embed Example</h2>
<div class="code-block container"><header class="code-block header"><div class="code-block lang">C#</div></header><pre class="code-block code-wrapper language-csharp csharp"><code class="code-block code-container language-csharp csharp"><codeline class="code-block line"><span class="token class-name">Embed</span> embed <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token constructor-invocation class-name">Embed</span></codeline><codeline class="code-block line"><span class="token punctuation">{</span></codeline><codeline class="code-block line"> Title <span class="token operator">=</span> <span class="token string">"Title"</span><span class="token punctuation">,</span></codeline><codeline class="code-block line"> Url <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token constructor-invocation class-name">Uri</span><span class="token punctuation">(</span><span class="token string">"https://guilded.gg/"</span><span class="token punctuation">)</span><span class="token punctuation">,</span></codeline><codeline class="code-block line"> Description <span class="token operator">=</span> <span class="token string">"Description"</span><span class="token punctuation">,</span></codeline><codeline class="code-block line"> Author <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token constructor-invocation class-name">EmbedAuthor</span><span class="token punctuation">(</span><span class="token string">"Author"</span><span class="token punctuation">,</span> iconUrl<span class="token punctuation">,</span> <span class="token string">"https://guilded.gg/"</span><span class="token punctuation">)</span><span class="token punctuation">,</span></codeline><codeline class="code-block line"> Footer <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token constructor-invocation class-name">EmbedFooter</span><span class="token punctuation">(</span><span class="token string">"Footer"</span><span class="token punctuation">,</span> iconUrl<span class="token punctuation">)</span><span class="token punctuation">,</span></codeline><codeline class="code-block line"> Timestamp <span class="token operator">=</span> DateTime<span class="token punctuation">.</span>Now<span class="token punctuation">,</span></codeline><codeline class="code-block line"> Color <span class="token operator">=</span> Color<span class="token punctuation">.</span>Red</codeline><codeline class="code-block line"><span class="token punctuation">}</span></codeline><codeline class="code-block line"> <span class="token punctuation">.</span><span class="token function">SetImage</span><span class="token punctuation">(</span>iconUrl<span class="token punctuation">)</span></codeline><codeline class="code-block line"> <span class="token punctuation">.</span><span class="token function">SetThumbnail</span><span class="token punctuation">(</span>iconUrl<span class="token punctuation">)</span></codeline><codeline class="code-block line"> <span class="token punctuation">.</span><span class="token function">AddField</span><span class="token punctuation">(</span><span class="token string">"Name #1"</span><span class="token punctuation">,</span> <span class="token string">"Value #1"</span><span class="token punctuation">,</span> <span class="token named-parameter punctuation">inline</span><span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">)</span></codeline><codeline class="code-block line"> <span class="token punctuation">.</span><span class="token function">AddField</span><span class="token punctuation">(</span><span class="token string">"Name #2"</span><span class="token punctuation">,</span> <span class="token string">"Value #2"</span><span class="token punctuation">,</span> <span class="token named-parameter punctuation">inline</span><span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">)</span></codeline><codeline class="code-block line"> <span class="token punctuation">.</span><span class="token function">AddField</span><span class="token punctuation">(</span><span class="token string">"Name #3"</span><span class="token punctuation">,</span> <span class="token string">"Value #3"</span><span class="token punctuation">)</span><span class="token punctuation">;</span></codeline></code></pre></div>
<div class="example-block container svelte-ok4ugp"><div class="message-block container svelte-z3n7z0"><aside class="message-block avatar-wrapper svelte-z3n7z0"><img class="message-block avatar svelte-z3n7z0" src="https://raw.githubusercontent.com/Guilded-NET/Guilded.NET/early-access/assets/Icon.png" alt="Example message user avatar"></aside>
<div class="message-block content"><header class="message-block header svelte-z3n7z0"><span class="message-block header-item name svelte-z3n7z0">Example Bot</span>
<span class="message-block header-item timestamp svelte-z3n7z0">Yesterday 6:27 PM</span>
<span class="message-block header-item user-badge svelte-z3n7z0">BOT</span></header>
<div class="message-block text"><div class="message-embed container svelte-ddm2fs" style="border-left-color: #ff0000;">
<header class="message-embed author svelte-ddm2fs"><div class="message-embed icon author-icon svelte-ddm2fs"><img class="message-embed icon-image svelte-ddm2fs" src="https://raw.githubusercontent.com/Guilded-NET/Guilded.NET/early-access/assets/Icon.png" alt="Embed Author Icon"></div>
<a class="message-embed author-text linked-text svelte-ddm2fs" href="https://guilded.gg/">Author</a></header>
<article class="message-embed content-wrapper svelte-ddm2fs"><div class="message-embed body"><h4 class="message-embed title message-embed content-header svelte-ddm2fs"><a class="message-embed linked-text svelte-ddm2fs" href="https://guilded.gg/">Title</a></h4>
<section class="message-embed description">
Description
</section>
<section class="message-embed fields svelte-ddm2fs">
<section class="message-embed-field container inline svelte-gxus2e"><h4 class="message-embed-field name svelte-gxus2e">
Name #1
</h4>
<div class="message-embed-field value">
Value #1
</div>
</section><section class="message-embed-field container inline svelte-gxus2e"><h4 class="message-embed-field name svelte-gxus2e">
Name #2
</h4>
<div class="message-embed-field value">
Value #2
</div>
</section><section class="message-embed-field container svelte-gxus2e"><h4 class="message-embed-field name svelte-gxus2e">
Name #3
</h4>
<div class="message-embed-field value">
Value #3
</div>
</section>
</section>
<div class="message-embed image-block svelte-ddm2fs"><img class="message-embed image svelte-ddm2fs" src="https://raw.githubusercontent.com/Guilded-NET/Guilded.NET/early-access/assets/Icon.png" alt="Embed Img"></div></div>
<aside class="message-embed thumbnail svelte-ddm2fs"><img class="message-embed thumbnail-image svelte-ddm2fs" src="https://raw.githubusercontent.com/Guilded-NET/Guilded.NET/early-access/assets/Icon.png" alt="Embed Thumbnail"></aside></article>
<footer class="message-embed footer svelte-ddm2fs"><div class="message-embed icon footer-icon svelte-ddm2fs"><img class="message-embed icon-image svelte-ddm2fs" src="https://raw.githubusercontent.com/Guilded-NET/Guilded.NET/early-access/assets/Icon.png" alt="Embed Footer Icon"></div>
<span class="message-embed footer-content"><span class="message-embed footer-text svelte-ddm2fs">Footer</span>
<span class="message-embed timestamp svelte-ddm2fs">April 30, 2023</span></span></footer>
</div></div></div>
</div>
</div>
<h2>The end</h2>
<p>There is more to custom embeds than mentioned here. <a href="/">Custom embed reference page</a> contains all of the other information necessary, such as how to set a thumbnail or an image. It is recommended to check it out if you want to work with embeds.</p>
</div></article>
</div>
</div></div>
</main>
</body>
</html>
You can’t perform that action at this time.