Cách setup Campaign Star Map
Teeinblue đã ra mắt tính năng mới: Star Map
Trong bài viết này, chúng tôi sẽ guide bạn qua các bước setup Campaign Star Map.
Trước hết, bạn sẽ cần connect tài khoản Mapbox hoặc Google Map với teeinblue trước. Việc này là để bạn có thể sử dụng được tính năng tìm kiếm location khi sử dụng Star Map. Đọc thêm hướng dẫn cách tạo tài khoản tại đây.
Bạn có thể tìm thấy giao diện setup trong mục Extras > Star maps generator
Location và Time ở đây sẽ chỉ có vai trò preview trong panel setting này. Đây sẽ không phải là giá trị default trong Artwork Editor của bạn.
Tại mục này, bạn có khá nhiều lựa chọn để tùy chỉnh Star Map. Hãy cùng tìm hiểu về mỗi đề mục dưới đây.
Bạn có thể chọn luôn một style có sẵn ở đây. Việc này sẽ giúp bạn tiết kiệm thời gian setup Campaign.
Tại đây, bạn có thể setting:
Toggle: Ẩn/hiện Star Map
Size: Kích thước hiển thị của Star Map
Fill Color: Màu sắc của Star Map
Opacity: Độ đậm/nhạt của Star Map
Tại đây, bạn có thể setting:
Toggle Show: Ẩn/hiện Constellations
Color: Màu sắc của Constellations
Stroke width: Kích thước của Constellations
Stroke opacity: Độ đậm/nhạt của Constellation
Name Toggle: Ẩn/hiện tên của Constellations
Name Type: Kiểu hiển thị tên của Constellations
Name Color: Màu sắc tên của Constellations
Bạn sẽ không thể chỉnh sửa font-family của tên Constellations
Settings này sẽ là do bạn tùy chỉnh. Khách hàng sẽ không thể edit lại.
Tại đây, bạn có thể setting:
Toggle Show: Ẩn/hiện Graticule
Color: Màu sắc của Graticule
Width: Kích thước của các đường Graticule
Opacity: Độ đậm/nhạt của các đường Graticule
Settings này sẽ là do bạn tùy chỉnh. Khách hàng sẽ không thể edit lại.
Tại đây, bạn có thể setting:
Toggle Show: Ẩn/hiện Milky Way
Fill Color: Màu sắc của Milky Way
Fill opacity: Độ đậm/nhạt của Milky Way
Settings này sẽ là do bạn tùy chỉnh. Khách hàng sẽ không thể edit lại.
Tại đây, bạn có thể setting:
Fill Color: Màu sắc của Trái Đất
Opacity: Độ đậm/nhạt của màu của Trái Đất
Stroke Color: Màu sắc của viền Trái Đất
Width: Độ dày của viền Trái Đất
Settings này sẽ là do bạn tùy chỉnh. Khách hàng sẽ không thể edit lại.
Sau khi bạn đã config mọi thứ theo ý mình, bạn sẽ thấy có đoạn snippet dưới đây
Nếu cần thì bạn nên quay lại page Star map generator để edit lại configuration, tuyệt đối không nên tự đổi code trực tiếp ở đây
Lưu ý, bạn chỉ có thể tạo mỗi lúc một configuration. Hãy nhớ backup configuration bạn vừa tạo trước, trước khi tạo mới.
Trong Artwork Editor, tạo mới một layer như bạn thường làm, sau đó chọn Star Maps:
Bạn có thể upload một layer có shape đặc biệt nếu muốn, nhưng nên để layer có tỉ lệ 1:1 (vuông).
Lưu ý, Star Map sẽ luôn là hình tròn được đặt trong khung vuông
Do vậy, nếu các phần được hiển thị ngoài phần đứt đoạn trên, sẽ bị lược bỏ.
Lưu ý: Layer mà bạn dùng cho tính năng Star Map, phải luôn có tỉ lệ là hình vuông.
Tại Artwork Editor, bạn cũng sẽ có một setting panel riêng cho Star Map. Đầu tiên, bạn nên copy luôn đoạn config mà bạn vừa tạo ra vào trước:
Nếu bạn muốn đổi lại config của Star Map, hãy quay lại Extras > Star maps generator và tạo config mới
Tại đây, bạn có thể setting:
Default location (Setting này sẽ ghi đè lên default location mà bạn vừa config trong mục Star map generator)
Cài đặt tên cho mỗi lựa chọn
Cài đặt placeholder text cho mỗi lựa chọn
Cài đặt cho phép khách hàng bật/tắt mỗi lựa chọn
Defaul location là vị trí mặc định đầu tiên mà khách hàng sẽ nhìn thấy trên bản đồ khi chưa nhập địa chỉ nào.
Bạn có thể thay đổi vị trí mặc định này bằng cách điền vĩ độ (latitude) & kinh độ (longitude) của địa điểm mới.
Để biết vĩ độ và kinh độ của một địa điểm: tìm kiếm địa điểm đó trên Google maps > chuột phải vào điểm đánh dấu > copy "latitude, longitude" hoặc copy trên thanh địa chỉ.
Sau khi bạn đã setting xong, Campaign của bạn sẽ như sau:
Nếu bạn đã hài lòng, thì bạn có thể publish Campaign!
Ở ví dụ này, nếu vị trí bản đồ Map Location được đặt là Berlin, Germany, cả ô text và live preview sẽ tự động hiển thị là Berlin, Germany
Để làm được như vậy, hãy làm các bước sau:
Tạo một layer text
Bật setting Populate values from other options
Tiếp tục chọn layer mà bọn muốn lấy giá trị. Trong trường hợp này, nó là layer Street Map
Chọn kiểu giá trị mà bạn muốn lấy. Bạn có thể chọn nút Lookup values để xem thêm chi tiết. Hiện tại Teeinblue chỉ hỗ trợ các giá trị như dưới đây, chúng mình sẽ tiếp tục update nhiều giá trị hơn trong thời gian sắp tới.
Vì bạn muốn lấy giá trị tên địa điểm, bạn có thể copy và paste gái trị {{place_name}}.
| Tips: Bạn có thể điền một tùy chọn với giá trị tùy chọn
Xem kết quả trên Store của bạn:
Bạn có thể kết hợp nhiều giá trị nếu bạn muốn
CHÚ Ý:
Khách hàng có thể sửa text bất cứ khi nào họ muốn, kể cả sau khi text đã được tự động điền.
Nếu khách hàng thay đổi vị trí bản đồ, text sẽ được update với giá trị mới thay thế giá trị cũ đã điền trước đó.
Nếu cần trợ giúp, thì hãy liên hệ chúng tôi qua: support@teeinblue.com
Trong bài viết này, chúng tôi sẽ guide bạn qua các bước setup Campaign Star Map.
Connect Mapbox & Google Maps account
Trước hết, bạn sẽ cần connect tài khoản Mapbox hoặc Google Map với teeinblue trước. Việc này là để bạn có thể sử dụng được tính năng tìm kiếm location khi sử dụng Star Map. Đọc thêm hướng dẫn cách tạo tài khoản tại đây.
Setting Star Map Campaign
Bạn có thể tìm thấy giao diện setup trong mục Extras > Star maps generator
Mục Preview
Location và Time ở đây sẽ chỉ có vai trò preview trong panel setting này. Đây sẽ không phải là giá trị default trong Artwork Editor của bạn.
Mục Styling
Tại mục này, bạn có khá nhiều lựa chọn để tùy chỉnh Star Map. Hãy cùng tìm hiểu về mỗi đề mục dưới đây.
Styling
Bạn có thể chọn luôn một style có sẵn ở đây. Việc này sẽ giúp bạn tiết kiệm thời gian setup Campaign.
Stars
Tại đây, bạn có thể setting:
Toggle: Ẩn/hiện Star Map
Size: Kích thước hiển thị của Star Map
Fill Color: Màu sắc của Star Map
Opacity: Độ đậm/nhạt của Star Map
Constellations
Tại đây, bạn có thể setting:
Toggle Show: Ẩn/hiện Constellations
Color: Màu sắc của Constellations
Stroke width: Kích thước của Constellations
Stroke opacity: Độ đậm/nhạt của Constellation
Name Toggle: Ẩn/hiện tên của Constellations
Name Type: Kiểu hiển thị tên của Constellations
Name Color: Màu sắc tên của Constellations
Bạn sẽ không thể chỉnh sửa font-family của tên Constellations
Settings này sẽ là do bạn tùy chỉnh. Khách hàng sẽ không thể edit lại.
Graticule
Tại đây, bạn có thể setting:
Toggle Show: Ẩn/hiện Graticule
Color: Màu sắc của Graticule
Width: Kích thước của các đường Graticule
Opacity: Độ đậm/nhạt của các đường Graticule
Settings này sẽ là do bạn tùy chỉnh. Khách hàng sẽ không thể edit lại.
Milky Way
Tại đây, bạn có thể setting:
Toggle Show: Ẩn/hiện Milky Way
Fill Color: Màu sắc của Milky Way
Fill opacity: Độ đậm/nhạt của Milky Way
Settings này sẽ là do bạn tùy chỉnh. Khách hàng sẽ không thể edit lại.
Background
Tại đây, bạn có thể setting:
Fill Color: Màu sắc của Trái Đất
Opacity: Độ đậm/nhạt của màu của Trái Đất
Stroke Color: Màu sắc của viền Trái Đất
Width: Độ dày của viền Trái Đất
Settings này sẽ là do bạn tùy chỉnh. Khách hàng sẽ không thể edit lại.
Sau khi bạn đã config mọi thứ theo ý mình, bạn sẽ thấy có đoạn snippet dưới đây
Nếu cần thì bạn nên quay lại page Star map generator để edit lại configuration, tuyệt đối không nên tự đổi code trực tiếp ở đây
Lưu ý, bạn chỉ có thể tạo mỗi lúc một configuration. Hãy nhớ backup configuration bạn vừa tạo trước, trước khi tạo mới.
Add configuration Star Map vào trong Artwork
Trong Artwork Editor, tạo mới một layer như bạn thường làm, sau đó chọn Star Maps:
Bạn có thể upload một layer có shape đặc biệt nếu muốn, nhưng nên để layer có tỉ lệ 1:1 (vuông).
Lưu ý, Star Map sẽ luôn là hình tròn được đặt trong khung vuông
Do vậy, nếu các phần được hiển thị ngoài phần đứt đoạn trên, sẽ bị lược bỏ.
Lưu ý: Layer mà bạn dùng cho tính năng Star Map, phải luôn có tỉ lệ là hình vuông.
Tại Artwork Editor, bạn cũng sẽ có một setting panel riêng cho Star Map. Đầu tiên, bạn nên copy luôn đoạn config mà bạn vừa tạo ra vào trước:
Nếu bạn muốn đổi lại config của Star Map, hãy quay lại Extras > Star maps generator và tạo config mới
Tại đây, bạn có thể setting:
Default location (Setting này sẽ ghi đè lên default location mà bạn vừa config trong mục Star map generator)
Cài đặt tên cho mỗi lựa chọn
Cài đặt placeholder text cho mỗi lựa chọn
Cài đặt cho phép khách hàng bật/tắt mỗi lựa chọn
Cách setup default location
Defaul location là vị trí mặc định đầu tiên mà khách hàng sẽ nhìn thấy trên bản đồ khi chưa nhập địa chỉ nào.
Bạn có thể thay đổi vị trí mặc định này bằng cách điền vĩ độ (latitude) & kinh độ (longitude) của địa điểm mới.
Để biết vĩ độ và kinh độ của một địa điểm: tìm kiếm địa điểm đó trên Google maps > chuột phải vào điểm đánh dấu > copy "latitude, longitude" hoặc copy trên thanh địa chỉ.
Sau khi bạn đã setting xong, Campaign của bạn sẽ như sau:
Nếu bạn đã hài lòng, thì bạn có thể publish Campaign!
Điền giá trị từ các tùy chọn khác - Populate values from other options
Ở ví dụ này, nếu vị trí bản đồ Map Location được đặt là Berlin, Germany, cả ô text và live preview sẽ tự động hiển thị là Berlin, Germany
Để làm được như vậy, hãy làm các bước sau:
Tạo một layer text
Bật setting Populate values from other options
Tiếp tục chọn layer mà bọn muốn lấy giá trị. Trong trường hợp này, nó là layer Street Map
Chọn kiểu giá trị mà bạn muốn lấy. Bạn có thể chọn nút Lookup values để xem thêm chi tiết. Hiện tại Teeinblue chỉ hỗ trợ các giá trị như dưới đây, chúng mình sẽ tiếp tục update nhiều giá trị hơn trong thời gian sắp tới.
Vì bạn muốn lấy giá trị tên địa điểm, bạn có thể copy và paste gái trị {{place_name}}.
| Tips: Bạn có thể điền một tùy chọn với giá trị tùy chọn
Xem kết quả trên Store của bạn:
Bạn có thể kết hợp nhiều giá trị nếu bạn muốn
CHÚ Ý:
Khách hàng có thể sửa text bất cứ khi nào họ muốn, kể cả sau khi text đã được tự động điền.
Nếu khách hàng thay đổi vị trí bản đồ, text sẽ được update với giá trị mới thay thế giá trị cũ đã điền trước đó.
Nếu cần trợ giúp, thì hãy liên hệ chúng tôi qua: support@teeinblue.com
Cập nhật vào: 21/11/2024
Cảm ơn!