小组件自定义

运行机制

登录小组件是应用程序中用于用户注册和授权的图形界面。小组件可包含输入用户凭证的字段以及通过社交网络登录的按钮。此外，小组件还可包含解释性文字及其他按钮，例如重置密码或发送验证码按钮等。

艾克索拉提供标准小组件模板。其外观和内容由项目所选的登录方法决定。以下是经典登录小组件的标准视图。

登录管理器产品允许自定义小组件以使其更具辨识性并与您的应用程序或网站界面统一。为此您可以：

添加Logo
更改颜色方案
上传图片并将其作为小组件周围区域的背景
更改按钮和输入字段的轮廓形状
更改小组件上社交网络按钮的顺序（该顺序由所选的本地化国家/地区决定）
设置小组件的显示语言

您可以通过以下方式自定义小组件的外观和内容：

在发布商帐户中自定义小组件

建议您在发布商帐户中编辑小组件，因为这样可以：

实时查看所作的更改
直接在小组件自定义页面的编辑器中或预览窗口中测试小组件按钮的操作

通过发布商帐户对小组件所作的更改将应用到使用小组件的每一处。

小组件自定义仅在签署艾克索拉产品许可协议后可用。要签署该协议，请前往您发布商帐户中的协议部分。

要自定义小组件：

在发布商帐户中打开您的项目，然后前往登录管理器部分。
在登录管理器项目面板中单击配置。
前往自定义区块，然后选择小组件自定义部分。

选择小组件本地化的语言和国家/地区。
使用编辑器自定义小组件样式。
完成所有设置后，使用小组件预览区域上方的按钮切换到HTML模式。

单击复制代码复制生成的小组件初始化代码。使用该代码将小组件集成到您的应用程序或网站。

如何使用小组件编辑器

要打开小组件编辑器，请在小组件自定义页面上单击自定义。
在编辑器窗口中，对小组件样式进行所需更改：
所有更改在小组件预览区域中实时显示。

所有参数更改将自动保存，因此您可以随时中止及继续小组件编辑。

要检查小组件在不同语言下显示效果，请在小组件预览区域上方的下拉列表中更改语言。

更改编辑器中的语言不影响小组件对用户显示的语言。

在小组件编辑器中完成所有更改后，单击发布。

一旦发布，小组件将在其连接的所有应用程序和网站上更改。

发布后，小组件自定义页面可能会显示浏览器从缓存中加载的上一版本的小组件。如发生此情况，请按Control+F5刷新页面。

如何添加Logo

打开小组件编辑器。
在编辑器侧边栏中，单击登录管理器小组件。
在打开的登录管理器小组件编辑器面板中，选择Logo开关。

单击开关下方的上传按钮。
在文件搜索窗口，选择Logo图片文件，然后单击打开。

资源

如要测试Logo的不同版本，请使用资源面板中的上传按钮。

要在小组件中显示不同版本的Logo，请在资源面板中单击其图片。
结束自定义Logo后，请关闭资源面板。您的最终选择将自动保存。

如何更改小组件的颜色方案

小组件的颜色方案由三个基础色定义：

文本 — 用于解释性文字、输入字段内容以及小组件底部按钮上的社交网络Logo。
按钮 — 用于登录和接受并创建按钮、突出显示字段和按钮的轮廓、链接以及活动小组件选项卡的标题。
页面色调 — 定义小组件的背景色。

全屏显示小组件的页面的颜色是按钮和页面色调颜色的组合。该颜色为自动设置。

小组件顶部的最常用社交网络按钮始终以同一颜色显示，不论所选的颜色方案是什么。

要更改小组件的基础色：

打开登录管理器小组件。
在编辑器侧边栏中，单击全局主题，然后单击要更改的基础色的按钮。
通过以下方式之一选择新颜色：
- 在打开的色板中指定。要更改色板中的颜色，请使用色板下方的滑块。
- 使用滑块下方的按钮来切换模式：HEX、RGB或HSL，然后以所选格式输入颜色代码。
对颜色方案的更改实时在小组件预览区域显示。

如需要，可用同样方式更改其他基础色。

如何在小组件周围区域放置背景图片

打开小组件编辑器。
在编辑器侧边栏中，单击登录管理器小组件。
在打开的登录管理器小组件编辑器面板的页面背景部分，单击+图标，然后单击上传按钮。

在文件搜索窗口中，选择背景图片文件，然后单击打开。

资源

如果要测试背景图片的不同版本，请使用资源面板中的上传按钮。
要在小组件预览区域显示不同背景，请在资源面板中单击其图片。
完成背景图片自定义后，请关闭资源面板。您的最终选择将自动保存。

如何改变按钮形状

小组件的所有按钮和输入字段均为圆角矩形或方形。圆度值可在0（直角）到100%之间调整。

要更改圆度：

打开小组件编辑器。
使用圆度滑块选择小组件按钮的形状。

如何更改社交网络按钮的顺序

仅当您的登录管理器项目设置中连接了社交网络后，社交网络按钮才会显示。按钮的顺序由本地化国家/地区决定。小组件将显示该国家/地区中最常使用的社交网络的按钮，并按照常用程度从左到右降序排列。在小组件顶部一栏，将对用户显示其最近用于登录应用程序的社交网络。

默认情况下，国家/地区参数设置为自动检测。如要更改该设置，请使用小组件自定义页面上的国家/地区下拉列表。

如要为社交网络按钮在小组件上的显示指定不同的顺序，请联系您的客户成功经理或发送邮件至 csm@xsolla.com。

如何设置小组件的显示语言

标准艾克索拉登录小组件提供20种语言的本地化。界面本地化的语言用preferredLocale变量的前两个字母编码，可在初始化时传入小组件。

示例：要将小组件显示为英文，则设置preferredLocale: “en_XX”。

如未设置preferredLocale变量，则语言由IP地址或浏览器语言自动决定。

要设置小组件对用户显示的语言：

在小组件自定义页面，从可用语言下拉列表中选择一个语言。

preferredLocale

要查看初始化代码，请切换到HTML模式（使用预览区域上方的按钮）。
要检查小组件在所选语言下的显示效果，请切换到预览模式。

您也可以直接在集成到应用程序或网站的小组件初始化代码中更改preferredLocale变量的值，从而自定义小组件的显示语言。

使用JSON文件自定义小组件

如已连接艾克索拉Login Widget SDK，您可以不通过发布商帐户来更改小组件的外观和内容。您可在文本编辑器中对以下JSON文件作出更改：

socialsJSON，用于设置社交网络按钮在小组件上的显示顺序；
themeJSON，用于自定义小组件的外观：
- 选择小组件的颜色方案及其周围的区域；
- 设置一些元素类型边角的圆度：按钮、输入字段和小组件本身；
- 对不同元素使用背景图片：小组件标题、小组件本身、小组件周围区域；
- 如需要，隐藏小组件的授权或注册选项卡以及社交网络按钮。

可编辑的小组件设置说明见包含小组件设置的JSON文件部分。

小组件的显示语言不在JSON文件中设置，而是使用preferredLocale参数在小组件初始化代码中设置。

通过上传CSS文件来自定义小组件

创建一个CSS文件，在其中包含登录区块的视觉设置。

字体自定义代码示例：

Copy

Full screen

Small screen

@font-face {
    font-family: 'Chakra petch';
    font-stretch: normal;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Chakra-Petch-Regular'),
        url('https://some-url-to-fonts/Chakra-Petch-Regular.woff2 ') format('woff2');
}

@font-face {
    font-family: 'Chakra petch';
    font-stretch: normal;
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: local('Chakra-Petch-Bold'),
        url('https://some-url-to-fonts/Chakra-Petch-Bold.woff2 ') format('woff2');
}

@font-face {
    font-family: 'Chakra petch';
    font-stretch: normal;
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: local('Chakra-Petch-Thin'),
        url('https://some-url-to-fonts/Chakra-Petch-Thin.woff2 ') format('woff2');
}

body, .app-block {
    font-family: 'Chakra petch', sans-serif;
}

样式自定义代码示例：

Copy

Full screen

Small screen

#mainBody {
  padding: 13px 36px 25px;
  height: 464px;
  border: 1px solid #989898;
  box-shadow: 0 2px 27px rgba(0, 0, 0, 0.5);
}

form {
  position: relative;
}

.universal-input {
  margin-top: 30px;
}

button[data-testid="login-form__button-submit"] {
  background: black;
  padding: 10px 22px 11px;
  height: 40px;
  color: rgba(255, 255, 255, 1);
}

在发布商帐户中打开您的项目，然后前往登录管理器部分。
在登录管理器项目面板中单击配置。
在导航页上，前往自定义区块，然后选择小组件自定义部分。
在其他自定义区块中上传您的CSS文件。

单击保存更改。

自定义小组件文字

登录管理器小组件有26种语言的本地化：英语、阿拉伯语、缅甸语、保加利亚语、中文、捷克语、德语、西班牙语、法语、菲律宾语、匈牙利语、印度尼西亚语、意大利语、日语、高棉语、韩语、老挝语、尼泊尔语、波兰语、葡萄牙语、罗马尼亚语、俄语、泰语、土耳其语、繁体中文和越南语。您可以自定义登录管理器小组件的文字。以下是它们在英文下的默认键值：

要更改小组件的其他文字，请联系您的个人经理或发送邮件到 integration@xsolla.com.

Copy

Full screen

Small screen

{
  "form.auth.title": "",
  "form.auth.subtitle": "",
  "login.link": "Log in",
  "sign-up.link": "Sign up",
  "back-button.text": "Back to login",
  "form.field.email": "Email",
  "form.field.password": "Password",
  "form.field.new-password": "New password",
  "form.field.confirm-password.validation": "Passwords do not match",
  "form.field.confirm-password": "Confirm password",
  "form.field.required.validation": "Required",
  "form.login.login-button": "Log in",
  "form.reset-password.reset-button": "Recover password",
  "form.reset-password.link": "Forgot your password?",
  "form.reset-password.header": "Recover password",
  "form.reset-password.message": "You will receive an email with a link to reset your password.",
  "form.reset-password.success": "It’s okay, we all forget sometimes. Just change your password using the instructions we sent to {email}.",
  "form.reset-password.resend": "Resend message",
  "form.set-password.set-button": "Set new password",
  "form.set-password.success": "Password is successfully recovered.",
  "form.field.sign-up.consent" : "Please choose whether or not to give us your {link} to carry out profiling and use your data for marketing purposes.",
  "form.field.sign-up.username": "Username",
  "form.field.sign-up.email": "Email",
  "form.field.sign-up.password": "Password",
  "form.field.sign-up.bday": "Date of birth",
  "form.field.sign-up.birthday": "Date of birth",
  "form.field.sign-up.nickname": "Nickname",
  "form.field.sign-up.last_name": "Last name",
  "form.field.sign-up.first_name": "First name",
  "form.field.sign-up.family-name": "Last name",
  "form.field.sign-up.given-name": "First name",
  "form.field.sign-up.gender": "Gender",
  "form.field.sign-up.country": "Country",
  "form.field.sign-up.country-name": "Country",
  "form.field.sign-up.platform": "Platform",
  "form.field.sign-up.promo_email_agreement": "Subscribe to our newsletter",
  "form.field.sign-up.password_confirm": "Confirm password",
  "form.field.sign-up.complete-registration.description": "Please confirm your account following the instructions we sent to {email}.",
  "form.field.sign-up.confirm-registration.description": "We sent a confirmation code to {email}.{newLine}{timerMessage}",
  "form.field.sign-up.complete-registration.spam": "If you cannot find the confirmation email, please check the spam folder.",
  "form.field.sign-up.complete-registration.button": "Thanks, dismiss",
  "form.sign-up.sign-up-button": "Create account",
  "form.sign-up.sign-up-button.accept": "Accept and create",
  "form.sign-up.sign-up-button.decline": "Skip and create",
  "form.get-code.confirm-code.we-sent": "We sent a confirmation code to {whereTo}.",
  "form.get-code.confirm-code.can-resend-timer": "You can get a new code in {timer} {timer, plural, one {second} other {seconds}}.",
  "form.get-link.confirm-link.we-sent": "We’ve sent a confirmation email with a link to {whereTo}.",
  "form.get-link.confirm-link.can-resend-timer": "You can get a new confirmation email with a link in {timer} {timer, plural, one {second} other {seconds}}.",
  "form.ask.header": "Provide additional info",
  "form.ask.back-button.text": "Back to {link}",
  "form.ask.button.confirm": "continue",
  "form.ask.back-button.text.link": "login options",
  "form.ask.title.collect.email": "We will send an email with the confirmation code.",
  "form.ask.title.collect.phone": "We will send you a confirmation code.",
  "form.ask.title.collect.both-data.phone": "Confirm your phone and email address.",
  "form.ask.title.collect.both-data.email": "Confirm your email address and phone.",
  "form.ask.title.collect.confirm.phone": "Confirm your phone",
  "form.ask.title.collect.confirm.email": "Confirm your email address",
  "form.ask.title.collect.confirm.both-data": "Confirm your data",
  "form.ask.confirm-code.email": "Enter the code we sent to {whereTo} to confirm your email address.",
  "form.ask.confirm-code.phone": "Enter a confirmation code we sent to {whereTo}.",
  "form.ask.confirm-code.email.link": "Click the link in the email we sent to {whereTo} to confirm your email address.",
  "form.ask.confirm-code.email.link.resend": "Resend confirmation email",
  "back-button.previous-step": "Back to {link}",
  "back-button.previous-step.link": "previous step",
  "form.ask.skip-button": "Skip",
  "form.ask.dismiss-button": "dismiss",
  "form.ask.ask-button": "Submit",
  "form.ask.email.field-title": "Enter your email to secure your account.",
  "form.ask.phone.field-title": "Enter your phone to secure your account.",
  "form.ask.success-message": "Your data was saved.",
  "form.ask.confirm-registration.description": "We sent a confirmation code to {whereTo}.{newLine}{timerMessage}",
  "form.ask.confirm-registration.exist-phone": "This phone is linked to another {merchant} account. Log in with this phone?",
  "form.ask.confirm-registration.exist-email": "This email is linked to another {merchant} account. Log in with this email?",
  "form.ask.confirm-registration.exist-user.btn": "Yes, log in",
  "form.confirm-status.success.title": "Success",
  "form.confirm.main-title": "Are you trying to log in?",
  "form.confirm.decline-btn": "No",
  "form.confirm.accept-btn": "Yes",
  "form.confirm-status.success.subtitle.phone": "Your phone number has been confirmed. You can close this tab.",
  "form.confirm-status.success.subtitle.email": "Your email address has been confirmed. You can close this tab.",
  "form.confirm-status.fail.title.phone": "Phone number not confirmed",
  "form.confirm-status.fail.title.email": "Email address not confirmed",
  "form.confirm-status.fail.subtitle": "Confirmation code has expired. Go back to login and try again.",
  "form.confirm-status.decline.header": "Thank you. This answer helps us improve our services.",
  "form.confirm-code.invalid": "Confirmation code has expired.",
  "form.otp.description": "Enter the 6-digit verification code we sent to {destination}.",
  "form.otp.resend": "Resend code",
  "form.otp.resend-timer": "Resend code in {count} {count, plural, one {second} other {seconds}}",
  "form.otp.send-button": "Confirm",
  "form.field.otp.placeholder": "Verification code",
  "form.field.search.placeholder": "Search...",
  "form.change-auth-method.phone.message": "Enter phone number",
  "form.change-auth-method.email-username.message": "Enter email or username",
  "form.change-auth-method.email.message": "Enter email",
  "form.change-auth-method.username.message": "Enter username",
  "form.enter-your.email-username-phone": "Enter your email, username, or phone",
  "form.enter-your.email-username": "Enter your email or username",
  "form.enter-your.email-phone": "Enter your email or phone",
  "form.enter-your.username-phone": "Enter your username or phone",
  "form.enter-your.phone": "Enter your phone to receive SMS",
  "form.enter-your.email": "Enter your email address to get code",
  "form.enter-your.username": "Enter your username",
  "form.field.phone.code.title": "Enter the confirmation code",
  "form.button.login-now": "Log in",
  "form.button.submit": "Submit",
  "form.email-login.send-code.text": "We will send you a code to the email address you entered. Use this code to log in.",
  "form.phone-login.send-sms.text": "We will send you a code to the phone number you entered. Use this code to log in.",
  "form.button.get-code": "Get code",
  "form.button.get-link": "Get link",
  "form.button.get-link.resend": "Get link",
  "form.enter-phone-code.error.incorrect-code": "Incorrect confirmation code. Check the code that you received and try again.",
  "form.phone-login.get-code.timer-message": "We sent a confirmation code to {whereTo}.{newLine}{timerMessage}",
  "form.phone-login.get-code.resend-message": "We sent you a text with a confirmation code. {link}.",
  "form.phone-login.get-code.resend-code": "Resend the code",
  "success-message.footer": "This window will automatically close in 5 seconds",
}

要更改文字：

创建一个包含本地化小组件文字的JSON文件。可用区域位置有：
- en - 英语
- ar - 阿拉伯语
- bg - 保加利亚语
- cn - 简体中文
- cs - 捷克语
- de - 德语
- es - 西班牙语
- fr - 法语
- he - 希伯来语
- id - 印度尼西亚语
- it - 意大利语
- ja - 日语
- km - 高棉语
- ko - 韩语
- lo - 老挝语
- my - 缅甸语
- ne - 尼泊尔语
- ph - 菲律宾语
- pl - 波兰语
- pt - 葡萄牙语
- ro - 罗马尼亚语
- ru - 俄语
- th - 泰语
- tr - 土耳其语
- tw - 繁体中文
- vi - 越南语
文件应具备以下结构：

如没有提供任何语言的值，将使用默认值。

Copy

Full screen

Small screen

{
  "en": {
    "form.auth.title": "Sign Up",
    "form.auth.subtitle": "To continue authorization please enter your email"
  },
  "ar": {
    "form.auth.title": "الاشتراك",
    "form.auth.subtitle": "يُرجى إدخال بريدك الإلكتروني للمصادقة"
  },
  "bg": {
    "form.auth.title": "Sign Up",
    "form.auth.subtitle": "To continue authorization please enter your email<span>{timer}</span>"
  },
  "cn": {
    "form.auth.title": "Sign Up",
    "form.auth.subtitle": "To continue authorization please enter your email"
  },
  "cs": {
    "form.auth.title": "Sign Up",
    "form.auth.subtitle": "To continue authorization please enter your email"
  },
  "de": {
    "form.auth.title": "Registrieren",
    "form.auth.subtitle": "Bitte gib deine E-Mail-Adresse zur Authentifizierung ein"
  },
  "es": {
    "form.auth.title": "Registrarse",
    "form.auth.subtitle": "Introduce tu correo para la autentificación."
  },
  "fr": {
    "form.auth.title": "S'abonner",
    "form.auth.subtitle": "Veuillez saisir votre adresse e-mail pour vous authentifier"
  },
  "he": {
    "form.auth.title": "Sign Up",
    "form.auth.subtitle": "To continue authorization please enter your email"
  },
  "it": {
    "form.auth.title": "Iscriviti",
    "form.auth.subtitle": "Inserisci il tuo indirizzo e-mail per l'autenticazione"
  },
  "ja": {
    "form.auth.title": "サインアップ",
    "form.auth.subtitle": "認証のためにメールアドレスを入力してください"
  },
  "ko": {
    "form.auth.title": "가입",
    "form.auth.subtitle": "인증을 위해 이메일을 입력하세요"
  },
  "pl": {
    "form.auth.title": "Zarejestruj się",
    "form.auth.subtitle": "Podaj swój adres e-mail w celu uwierzytelnienia"
  },
  "pt": {
    "form.auth.title": "Registrar-se",
    "form.auth.subtitle": "Insira seu e-mail para autenticação"
  },
  "ro": {
    "form.auth.title": "Sign Up",
    "form.auth.subtitle": "To continue authorization please enter your email"
  },
  "ru": {
    "form.auth.title": "Подписаться",
    "form.auth.subtitle": "Введите адрес электронной почты для аутентификации"
  },
  "th": {
    "form.auth.title": "สมัคร",
    "form.auth.subtitle": "โปรดกรอกอีเมลของคุณเพื่อการตรวจสอบสิทธิ์"
  },
  "tr": {
    "form.auth.title": "Kaydol",
    "form.auth.subtitle": "Kimlik doğrulama için lütfen e-postanı gir"
  },
  "tw": {
    "form.auth.title": "Sign Up",
    "form.auth.subtitle": "To continue authorization please enter your email"
  },
  "vi": {
    "form.auth.title": "Đăng Ký",
    "form.auth.subtitle": "Vui lòng nhập email của bạn để xác thực",
  },
  "km": {
    "form.auth.title": "ចុះឈ្មោះ",
    "form.auth.subtitle": "បញ្ចូលអ៊ីមែល"
  },
  "id": {
    "form.auth.title": "Daftar",
    "form.auth.subtitle": "Masukkan email"
  },
  "lo": {
    "form.auth.title": "ລົງຊື່ເຂົ້າໃຊ້",
    "form.auth.subtitle": "ປ້ອນອີເມວ"
  },
  "my": {
    "form.auth.title": "အကောင့်ဖွင့်ရန်",
    "form.auth.subtitle": "အီးမေးလ်ကို ထည့်သွင်းပါ"
  },
  "ph": {
    "form.auth.title": "Mag-sign up",
    "form.auth.subtitle": "Ilagay ang email"
  },
  "ne": {
    "form.auth.title": "साइन अप गर्नुहोस्",
    "form.auth.subtitle": "इमेल हाल्नुहोस्"
  }
}

将创建的JSON文件放在您的服务器上。

文件URL示例：
https://your-domain.com/assets/loginWidgetLocales.json

在小组件初始化时传入文件URL，如下所示：

Copy

Full screen

Small screen

const xl = new Widget({
  // any other params
  customLabels: ‘https://your-domain.com/assets/loginWidgetLocales.json’
});

使用建站器自定义小组件

如使用艾克索拉建站器，可在建站器的区块设置中自定义登录管理器小组件。

要在建站器中自定义小组件：

在发布商帐户中打开您的项目。
在侧边栏中单击建站器。
在站点部分，选择您的网站，然后单击打开建站器。
在登录设置中前往布局部分。
上传Logo或自定义背景。方法是：
1. 选择Logo或自定义背景开关。
2. 单击开关下方的上传按钮。
3. 在文件搜索窗口中，选择Logo图片文件，然后单击打开。随后编辑器的侧边栏中将打开资料库面板，上传的图片将显示在该面板以及小组件的预览部分。
4. 选择图片大小（可选）：
  1. 单击上传的图片。
  2. 在图像部分，打开大小下拉列表，然后选择包含、覆盖或固定。
5. 更改图片色调（可选）：
  1. 单击上传的图片。
  2. 在图像 > 色调部分，单击⚙图标，然后选择选项或色板上的颜色。
6. 要在建站器中显示其他版本的Logo或背景，请在资料库面板中选择相应图片。
在艾克索拉登录管理器部分，您可以设置自动为登录区块选择颜色。方法是选中使用网站样式开关。

通过发布商帐户配置小组件后，请等待7-10分钟让小组件完成更新或刷新缓存。

在建站器中使用CSS代码自定义小组件

要使用此方法，您必须有一个可公开托管CSS文件以供后续使用的托管主机。

创建一个CSS文件，在其中包含登录区块的视觉设置。

示例：

Copy

Full screen

Small screen

#mainBody {
  padding: 13px 36px 25px;
  height: 464px;
  border: 1px solid #989898;
  box-shadow: 0 2px 27px rgba(0, 0, 0, 0.5);
}

form {
  position: relative;
}

.universal-input {
  margin-top: 30px;
}

button[data-testid="login-form__button-submit"] {
  background: black;
  padding: 10px 22px 11px;
  height: 40px;
  color: rgba(255, 255, 255, 1);
}

上传一个CSS代码文件到您可公开访问的托管主机并复制该文件的链接。
在建站器中，单击添加区块 > 自定义代码。
插入以下代码：

Copy

Full screen

Small screen

<script>
    window.SB.subscribe((api) => {
        api.login.setConfigMiddleware((config) => ({
            ...config,
            customStyle: "https://your-domain.com/assets/loginWidgetStyles.css"
        }));
    });
</script>

https://your-domain.com/assets/loginWidgetStyles.css — 包含样式的CSS文件的链接。

感谢您的反馈！

我们会查看您的留言并运用它改进用户体验。

上次更新时间: 2024年9月18日

发现了错别字或其他内容错误？请选择文本，然后按Ctrl+Enter。

Your browser is not supported. Please try a different browser

热门文章

或选择常见问题:

回答基于以下来源:

向我们提供反馈（可选）

向我们提供反馈（可选）

登录管理器

小组件自定义

运行机制

在发布商帐户中自定义小组件

如何使用小组件编辑器

如何添加Logo

如何更改小组件的颜色方案

如何在小组件周围区域放置背景图片

如何改变按钮形状

如何更改社交网络按钮的顺序

如何设置小组件的显示语言

使用JSON文件自定义小组件

通过上传CSS文件来自定义小组件

自定义小组件文字

使用建站器自定义小组件

在建站器中使用CSS代码自定义小组件