You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/core-concepts/connect-webviews/customizing-connect-webviews.md
+12-6Lines changed: 12 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -20,20 +20,26 @@ You can customize the following characteristics of your Connect Webviews:
20
20
21
21
You can customize the look and feel of your Connect Webviews in the following ways:
22
22
23
-
***Inviter Name:** Define the name to display in your Connect Webviews as the entity requesting user authorization for Seam to access their device or access control system account.
23
+
***Inviter name:** Define the name to display in your Connect Webviews as the entity requesting user authorization for Seam to access their device or access control system account.
24
24
***Logo:** Choose a logo for your Connect Webviews. Ensure that the image file size does not exceed 1 MB.
25
-
***Logo Shape:** Select the shape of your logo displayed in Connect Webviews. Choices are **Circle** (default) or **Square**.
26
-
***Primary Button Style:** Customize the background and text colors of the action button in your Connect Webview flow using a hex color code. The default color is #232426, which is almost black, and the default text color on the button is white.
25
+
***Logo shape:** Select the shape of your logo displayed in Connect Webviews. Choices are **Circle** (default) or **Square**.
26
+
***Primary button style:** Customize the background and text colors of the action button in your Connect Webview flow using a hex color code. The default color is #232426, which is almost black, and the default text color on the button is white.
27
+
***Success message:** Customize the message that the Connect Webview displays when the connection completes successfully.
27
28
28
29
It is important to note that any changes you make to the customization features will apply to all of your new Connect Webviews.
29
30
30
-
<figure><imgsrc="../../.gitbook/assets/connect-webview-customization.png"alt="Customize the look-and-feel characteristics of your Connect Webviews."><figcaption></figcaption></figure>
31
+
<figure><imgsrc="../../.gitbook/assets/connect-webview-customization.png"alt="You can customize the look and feel of Connect Webviews."><figcaption><p>You can customize the look and feel of Connect Webviews.</p></figcaption></figure>
32
+
33
+
To customize the look and feel of your Connect Webviews:
31
34
32
35
1. In the top navigation pane of [Seam Console](https://console.seam.co/), click **Developer**.
33
36
2. In the left navigation pane, click **Webviews**.
34
-
3. In the **Customize your Webview** pane on the **Webviews** page, configure any of the following features:
37
+
3. On the **Webviews** page, click **Configure your webview**.
38
+
4. In the **Customize your Webview** pane, configure any of the following features:
39
+
40
+
<table><thead><tr><th width="229">Feature</th><th>Instructions</th></tr></thead><tbody><tr><td>Inviter name</td><td><ol><li>In the <strong>Inviter Name</strong> area, click <strong>Edit</strong>.</li><li>Type the desired inviter name and then click <strong>Save</strong>.</li></ol></td></tr><tr><td>Logo</td><td><ol><li>In the <strong>Logo</strong> area, click <strong>Upload new logo</strong>.</li><li>Navigate to and select the image file that contains the desired logo.<br>The image file size cannot exceed 1 MB.</li><li>Click <strong>Open</strong>.</li></ol></td></tr><tr><td>Logo shape</td><td><ol><li>In the <strong>Logo Shape</strong> area, click <strong>Edit</strong>.</li><li>Select <strong>Circle</strong> or <strong>Square</strong> and then click <strong>Save</strong>.</li></ol></td></tr><tr><td>Primary button style</td><td><ol><li>In the <strong>Primary Button Style</strong> area, click <strong>Edit</strong>.</li><li>Click the <strong>Button Background Color</strong> field and specify the desired color. Default: <code>#232426</code> (almost black).</li><li>Click the <strong>Button Text Color</strong> field and specify the desired color. Default: <code>#ffffff</code> (white).</li><li>Click <strong>Save</strong>.</li></ol></td></tr><tr><td>Success message</td><td><ol><li>In the <strong>Success Message</strong> area, click <strong>Edit</strong>.</li><li><p>In the <strong>Message</strong> field, type the desired success message.</p><p>To reset the success message, click <strong>Clear</strong>.</p></li><li>Click <strong>Save</strong>.</li></ol></td></tr></tbody></table>
41
+
35
42
36
-
<table><thead><tr><th width="229">Customization Features</th><th>Instructions</th></tr></thead><tbody><tr><td>Inviter name</td><td><ol><li>In the <strong>Inviter Name</strong> area, click <strong>Edit</strong>.</li><li>Type the desired inviter name and then click <strong>Save</strong>.</li></ol></td></tr><tr><td>Logo</td><td><ol><li>In the <strong>Logo</strong> area, click <strong>Upload new logo</strong>.</li><li>Navigate to and select the image file that contains the desired logo.<br>The image file size cannot exceed 1 MB.</li><li>Click <strong>Open</strong>.</li></ol></td></tr><tr><td>Logo shape</td><td><ol><li>In the <strong>Logo Shape</strong> area, click <strong>Edit</strong>.</li><li>Select Circle or <strong>Square</strong> and then click <strong>Save</strong>.</li></ol></td></tr><tr><td>Primary button color</td><td><ol><li>In the <strong>Primary Button Color</strong> area, click <strong>Edit</strong>.</li><li>Type the desired <a href="https://www.w3schools.com/colors/colors_picker.asp">hex color code</a> and then click <strong>Save</strong>.</li></ol><p>Note that the default primary button color is <code>#232426</code> (almost black).</p></td></tr></tbody></table>
0 commit comments